Jquery更改选定div

时间:2016-10-26 04:58:51

标签: javascript jquery html css

我有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");
    }
    }
&#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应为白色

颜色

5 个答案:

答案 0 :(得分:0)

尝试使用这个简单的代码

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

答案 1 :(得分:0)

尝试类似的东西

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

这对我有用

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