jQuery不止一次点击
问题描述:
我已经开始自学jQuery了,我想知道如何在每次点击发生不同的事情时添加多个点击功能。jQuery不止一次点击
继承人的什么,我试图做一个例子:
$(document).ready(function() {
$("#color").click(function() {
$("#change_me").css("color", "purple");
$("#change_me").css("color", "black");
});//end color
});//end doc ready
我本来只用了“紫色”行,所以当我点击了文字改成紫色。然后我添加了“黑色”行(将其恢复为默认颜色),但现在绕过了紫色状态。
我尝试添加其他点击功能,但没有奏效
答
您可以使用jQuery toggleClass
为,创建具有颜色的类,你要点击后和点击它会添加/删除类
$(document).ready(function() {
$("#color").click(function() {
$("#change_me").toggleClass("purple");
//$("#change_me").css("color", "black");
});//end color
});//end
.purple{
color:purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="color">
<p id="change_me">
Click on the text to change its color
</p>
</div>
,如果你想超过2种颜色之间进行切换,你可以做这样的
$(document).ready(function(){
$("#change_me").toggle(
function(){$("#change_me").css({"color": "purple"});},
function(){$("#change_me").css({"color": "black"});},
function(){$("#change_me").css({"color": "green"});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="color">
<p id="change_me">
Click on the text to change its color
</p>
</div>
+0
这就是完美的Ram Segev。非常感谢 – markst33
+0
欢迎您:-) –
这不是绕过紫线。它正在执行紫色线,然后执行黑色线。它发生得太快,你看不到它。如果您希望它在每次点击时交替显示颜色,则需要添加逻辑来执行此操作。就像设置一个标志并在每次点击时改变它。或者看看像http://api.jquery.com/toggleclass/ – j08691
这样的功能,你是说你想让它在第一次点击时变成紫色,然后在第二次点击时变成黑色?第三等呢? – ADyson
为了以您想要的方式工作,您需要在应用新颜色之前检查线条的当前颜色。所以,如果它目前是紫色的,那么将其更改为黑色。同样,如果它是黑色的,则将其更改为紫色 – markpsmith