jQuery不止一次点击

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

继承人的什么，我试图做一个例子：

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

我本来只用了“紫色”行，所以当我点击了文字改成紫色。然后我添加了“黑色”行（将其恢复为默认颜色），但现在绕过了紫色状态。

我尝试添加其他点击功能，但没有奏效

来源

2017-07-26 markst33

这不是绕过紫线。它正在执行紫色线，然后执行黑色线。它发生得太快，你看不到它。如果您希望它在每次点击时交替显示颜色，则需要添加逻辑来执行此操作。就像设置一个标志并在每次点击时改变它。或者看看像http://api.jquery.com/toggleclass/ – j08691

这样的功能，你是说你想让它在第一次点击时变成紫色，然后在第二次点击时变成黑色？第三等呢？ – ADyson

为了以您想要的方式工作，您需要在应用新颜色之前检查线条的当前颜色。所以，如果它目前是紫色的，那么将其更改为黑色。同样，如果它是黑色的，则将其更改为紫色 – markpsmith

您可以使用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>

来源

2017-07-26 15:12:12

这就是完美的Ram Segev。非常感谢 – markst33

欢迎您:-) –

jQuery不止一次点击

回答

相关问题