简体   繁体   English

jQuery更改所选div的背景颜色

[英]Jquery change background colour for a selected div

I have this HTML code div in 4*4 format : 我有这个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> 

I have written the jquery code when on click the particular div has to change colour to red and remaining div colour should be white 当单击特定的div必须将颜色更改为红色且其余div颜色应为白色时,我已编写了jQuery代码

When I have executed this only the div1 has changing the colour to red and other divs are not changing the colour. 执行完此操作后,只有div1将颜色更改为红色,而其他div则没有更改颜色。

for eg : 例如:

if I click div1 change to red colour and other div2,div3,div4 should be in white color If I click div2 change to red colour and other div1,div3,div4 should be in white 如果我单击div1更改为红色,而其他div2,div3,div4应为白色如果我单击div2更改为红色,而其他div1,div3,div4应为白色

color 颜色

Try to use this simple code 尝试使用这个简单的代码

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

Try something Like that 尝试类似的东西

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

You need to use e.stopPropagation(); 您需要使用e.stopPropagation(); to prevent the other div elements from triggering as well. 也可以防止其他div元素触发。

you didn't properly terminate the first two lines with }); 您没有使用});正确终止前两行}); at the end of the script. 在脚本末尾。

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

You need to use e.stopPropagation() and not e.preventDefault() . 您需要使用e.stopPropagation()而不是e.preventDefault() Also since divs are nested you should give a color to the inside p tag and not the div itself. 另外,由于div是嵌套的,因此您应该给内部p标签加上颜色而不是div本身。 Also terminate your function correctly. 同时正确终止您的功能。

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

This worked for me 这对我有用

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM