Question

我已经开始自学jQuery了，我想知道如何添加多个点击功能，每次点击都会发生不同的事情。

以下是我想要做的一个例子：

$(document).ready(function() {
$("#color").click( function() {
$("#change_me").css("color", "purple");
$("#change_me").css("color", "black");
});//end color
});//end doc ready

我最初只有“紫色”线，所以当我点击文字时它变成了紫色。然后我添加了“黑色”线（将其恢复为默认颜色），但它现在绕过了紫色状态。

我尝试添加另一个点击功能但不起作用

Answer 1

你可以使用jQuery toggleClass，点击后创建一个你想要的颜色的类，点击它会添加/删除类

＆＃13;

$(document).ready(function() {
$("#color").click( function() {
$("#change_me").toggleClass("purple");
//$("#change_me").css("color", "black");
});//end color
});//end

＆＃13;

.purple{
  color:purple;
}

＆＃13;

<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>

＆＃13;

如果您想在两种以上的颜色之间进行更改，可以像这样做

＆＃13;

$(document).ready(function(){
    $("#change_me").toggle(
        function(){$("#change_me").css({"color": "purple"});},
        function(){$("#change_me").css({"color": "black"});},
        function(){$("#change_me").css({"color": "green"});
    });
});

＆＃13;

<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>

＆＃13;

jQuery不止一次点击

1 个答案: