Jquery更改选定div

Question

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

＆＃13;

＆＃13;

 $(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");
    }
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

当我执行此操作时，只有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元素触发。

您没有在脚本末尾使用});正确终止前两行。

＆＃13;

＆＃13;

  $(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");
        }
      }
     }
    });
  });

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您需要使用e.stopPropagation()而不是e.preventDefault()。此外，由于div是嵌套的，因此您应该为内部p标记赋予颜色，而不是div本身。也正确终止你的功能。

＆＃13;

＆＃13;

$(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");
}
}
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

这对我有用

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