jQuery更改所選div的背景顏色

Question

我有這個HTML代碼div為4 * 4格式：

  $(document).ready(function() { $("div").click(function(e){ var id_val=this.id; var word = id_val.split("-").pop(); alert(word) e.preventDefault(); for(var i=1;i<=4;i++) { if(i!=word) { $("#div-"+i+"").css("background-color","white"); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div-1"> <p>div1</p> <div id="div-2"> <p>div2</p> <div id="div-3"> <p>div3</p> <div id="div-4"> <p>div4</p> </div> </div> </div> </div> 

當單擊特定的div必須將顏色更改為紅色且其余div顏色應為白色時，我已編寫了jQuery代碼

執行完此操作后，只有div1將顏色更改為紅色，而其他div則沒有更改顏色。

例如：

如果我單擊div1更改為紅色，而其他div2，div3，div4應為白色如果我單擊div2更改為紅色，而其他div1，div3，div4應為白色

顏色

Answer 1

嘗試使用這個簡單的代碼

$(document).ready(function() {
$("div").click(function(e) {
  $('div[id^="div-"] p').css("background-color", "white"); //change the remaining elements who's id start with div- color to white 
  if ($(e.target).is('p')) {
    $(e.target).css("background-color", "red"); //change the clicked element color
  }
});

});

 $("div").click(function(e) { $('div[id^="div-"] p').css("background-color", "white"); //change the remaining elements who's id start with div- color to white if ($(e.target).is('p')) { $(e.target).css("background-color", "red"); //change the clicked element color } }); 

 body { background: #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div-1"> <p>div1</p> <div id="div-2"> <p>div2</p> <div id="div-3"> <p>div3</p> <div id="div-4"> <p>div4</p> </div> </div> </div> </div> 

Answer 2

嘗試類似的東西

$("div").click(function(e){
$("div[id^='div-']").css("background-color","white");
$(this).css("background-color","red");
}

Answer 3

您需要使用e.stopPropagation(); 也可以防止其他div元素觸發。

您沒有使用});正確終止前兩行}); 在腳本末尾。

  $(document).ready(function() { $("div").click(function(e) { var id_val = this.id; var word = id_val.split("-").pop(); if (word != null) { alert(word) e.stopPropagation(); for (var i = 1; i <= 4; i++) { if (parseInt(i) === parseInt(word)) { $("#div-" + i + "").css("background-color", "red"); } else { $("#div-" + i + "").css("background-color", "white"); } } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="div-1"> <p>div1</p> <div id="div-2"> <p>div2</p> <div id="div-3"> <p>div3</p> <div id="div-4"> <p>div4</p> </div> </div> </div> </div> 

Answer 4

您需要使用e.stopPropagation()而不是e.preventDefault() 。 另外，由於div是嵌套的，因此您應該給內部p標簽加上顏色而不是div本身。 同時正確終止您的功能。

 $(document).ready(function() { $("div").click(function(e){ var id_val=this.id; $(this).first("p").css("background-color","red") var word = id_val.split("-").pop(); alert(word) e.stopPropagation(); for(var i=1;i<=4;i++) { if(i!=word) { $("#div-"+i+"").css("background-color","white"); } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div-1"> <p>div1</p> <div id="div-2"> <p>div2</p> <div id="div-3"> <p>div3</p> <div id="div-4"> <p>div4</p> </div> </div> </div> </div> 

Answer 5

這對我有用

        $("div").click(function (e) {
            $(this).css("background-color", "red");
            $('div:not(#' + this.id + ')').css("background-color", "white");
            e.stopImmediatePropagation();
        });