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不止一次點擊

回答

相關問題