英文:
jQuery on and off events but same button
问题
我想要制作一个按钮，当按下时，会改变我的页面的背景颜色。然后，当再次按下它时，页面会恢复到原来的颜色。我不明白如何再次将其恢复到原始颜色（使用切换开关）。
---
$(function () {
$("#button").click(function () {
$("p").css("background-color", "red");
});
});
<details>
<summary>英文:</summary>
I want to make a button that, when pressed, changes the background color of my page. Then, when you press it again, the page will go back to its original color. I don't understand how to make it go back to the original color again (using Toggle switch).
---
$(function () {
$("#button").click(function () {
$("p").css("background-color", "red");
});
});
</details>
# 答案1
**得分**: 0
理想情况下，你可以使用*类*来实现这一点，这样可以轻松切换。例如：
```html
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言: lang-js -->
$(function () {
$("#button").click(function () {
$("p").toggleClass("red");
});
});
<!-- 语言: lang-css -->
.red {
background-color: red;
}
<!-- 语言: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>测试</p>
<button id="button" type="button">点击</button>
<!-- 结束代码片段 -->
如果必须使用直接样式规则，一种方法是将原始值存储在某个地方。然后在单击处理程序中，只需将当前值与原始值进行比较，然后以某种方式进行更改。例如：
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言: lang-js -->
$(function () {
const original = $("p").css("background-color");
$("#button").click(function () {
const current = $("p").css("background-color");
if (current === original) {
$("p").css("background-color", "red");
} else {
$("p").css("background-color", original);
}
});
});
<!-- 语言: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>测试</p>
<button id="button" type="button">点击</button>
<!-- 结束代码片段 -->
英文:
Ideally you would use classes for this, which are easily toggled. For example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(function () {
$("#button").click(function () {
$("p").toggleClass("red");
});
});
<!-- language: lang-css -->
.red {
background-color: red;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Test</p>
<button id="button" type="button">Click</button>
<!-- end snippet -->
If you must use direct style rules then one approach is to store the original value somewhere. Then in the click handler just compare the current value with that original and change it one way or the other. For example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(function () {
const original = $("p").css("background-color");
$("#button").click(function () {
const current = $("p").css("background-color");
if (current === original) {
$("p").css("background-color", "red");
} else {
$("p").css("background-color", original);
}
});
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Test</p>
<button id="button" type="button">Click</button>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论