如何進行交替點擊來更改按鈕內div的背景？

Question

我正在嘗試使用鼠標單擊來更改按鈕內div的背景顏色。

通過將onclick="document.getElementById('nrOne').style.background = 'black'"到<button id="btn1">元素中，我才設法使其在第一次單擊時<button id="btn1"> 。

<button id="btn1">

<div class="container-heading">
    <div class="container-number" id="nrOne">
        <h1> 01 </h1>
     </div>
    <div class="container-text">
        ...
    </div>

任何幫助或技巧都將受到高度贊賞。 謝謝StackOverflow！

Answer 1

您可以使用切換方法。 將其附加到按鈕上，然后創建兩個稱為altenate的函數：

$("#btn1").toggle(function(){
    $("#nrOne").css({ "background-color": "#000000" });
}, function(){
    $("#nrOne").css({ "background-color": "#FF0000" });
});

並且沒有切換方法，而是單擊方法：

var t = true;
$("#btn1").click(function(){
    if(t){
        t = false;
        $("#nrOne").css({ "background-color": "#000000" });
    }
    else{
        t = true;
        $("#nrOne").css({ "background-color": "#FF0000" });
    }
});

Answer 2

這是沒有jQuery的代碼

<button id="btn1" onclick="changeBackgroundColor(this)">

        function changeBackgroundColor(src)
        {
           document.getElementById("nrOne").style.background = 'black' // put some condition and change the color
        }

Answer 3

正如您用jQuery標記問題一樣，這是一個純jQ實現，它使用toggleClass在每次連續單擊時簡單地添加/刪除類：

 $('#btn1').click(function() { $('#nrOne').toggleClass('black'); }) 

 .black { background-color: #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btn1">Click me</button> <div class="container-heading"> <div class="container-number" id="nrOne"> <h1>01</h1> </div> <div class="container-text"> <h1>02</h1> </div> </div> 

Answer 4

謝謝大家這么快回復！ 我沒想到會有這樣一個有用的社區，這是我有史以來的第一篇帖子！ 我已經愛你們，這個很棒的網站！！

Answer 5

您可以僅使用javaScript完成相同的操作。 （您可以在此處向陣列添加任意數量的顏色，並通過單擊按鈕在它們上循環。）

var box = document.getElementById('div-of-which-you-want-the-color-to-change'),
        button = document.getElementById('button-with-event-handler'),
        indexOfChosenColor = 0;

button.onclick = function(){

        var colors = ['blue', 'red', 'green'];

        box.style.backgroundColor = colors[indexOfChosenColor%colors.length];
        indexOfChosenColor++;

}