Jquery更改所选div的背景颜色

Question

我有这个 4*4 格式的 HTML 代码 div：

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

我已经编写了 jquery 代码，点击时特定的 div 必须将颜色更改为红色，而剩余的 div 颜色应为白色

当我执行此操作时，只有 div1 将颜色更改为红色，而其他 div 没有更改颜色。

例如：

如果我点击 div1 变为红色，其他 div2,div3,div4 应该是白色 颜色 如果我点击 div2 变为红色，其他 div1,div3,div4 应该是白色的

颜色

Answer 1

您需要使用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 2

试试类似的东西

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

Answer 3

您需要使用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 4

这对我有用

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

Answer 5

尝试使用这个简单的代码

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