无法更新 div 组中嵌套 div 的背景颜色答案

【问题标题】：Unable to update background-color of nested div in group of divs无法更新 div 组中嵌套 div 的背景颜色
【发布时间】：2013-12-21 05:19:52
【问题描述】：

我遇到了障碍，不知道该去哪里找。

我有一个 200 像素 x 200 像素的 div。其中我有 4 个其他 div，它们是 65px x 65px，它们是绝对定位的，并且与外部 div 的所有 4 个角对齐。我创建了一个函数，当用户单击其中一个内部 div 时，会更新该 div 颜色并重置其他 3 个 div 背景颜色。目前，如果我单击前 2 个 div 中的任何一个，它都可以工作。如果我单击底部 2 个 div 中的任何一个，它都不起作用。

我感觉它与 z-index 和块对齐有关，但现在只是猜测。

我在下面添加了我的代码。

HTML：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="scripts1.js"></script>

<script>
$(document).ready(function(){
  BuildHandler();
});
</script>

</head>
<body>
  <div id="mini_container">
    <div id="top_left" class="mini_boxes"></div>
    <div id="top_right" class="mini_boxes"></div>
    <div id="low_left" class="mini_boxes"></div>
    <div id="low_right" class="mini_boxes"></div>
  </div>
</body>
</html>

scripts1.js

function BoxClicked(event){
  var targetBoxID = event.target.id;
  switch (targetBoxID)
  {
    case "top_left":
      $("#top_left").css("background-color","#0099FF");
      $("#top_right").css("background-color","#99CCFF");
      $("#low_left").css("background-color","#99CCFF");
      $("#low_right").css("background-color","#99CCFF");
      break;
    case "top_right":
      $("#top_left").css("background-color","#99CCFF");
      $("#top_right").css("background-color","#0099FF");
      $("#low_left").css("background-color","#99CCFF");
      $("#low_right").css("background-color","#99CCFF");
    case "low_left":
      $("#top_left").css("background-color","#99CCFF");
      $("#top_right").css("background-color","#99CCFF");
      $("#low_left").css("background-color","#0099FF");
      $("#low_right").css("background-color","#99CCFF");
    case "low_right":
      $("#top_left").css("background-color","#99CCFF");
      $("#top_right").css("background-color","#99CCFF");
      $("#low_left").css("background-color","#99CCFF");
      $("#low_right").css("background-color","#0099FF");
  }
}

function BuildHandler(){
  var theBoxes = document.getElementsByClassName("mini_boxes");
  for(i=0;i<theBoxes.length;i++){
    theBoxes[i].addEventListener('click', BoxClicked, false);
  }
}

style1.css

#mini_container{
width:200px;
height:200px;
background-color:#C4CFCE;
position:relative;
z-index:100;
}

.mini_boxes{
  width:65px;
  height:65px;
  background-color:#99CCFF;
  z-index:200;
}

#top_left{
  position:absolute;
  top:0px;
  left:0px;
}

#top_right{
  position:absolute;
  top:0px;
  right:0px;
}

#low_left{
  position:absolute;
  bottom:0px;
  left:0px;
}

#low_right{
  position:absolute;
  bottom:0px;
  right:0px;
}

任何指针将不胜感激。

【问题讨论】：

你可以为你的代码创建一个小提琴，以便人们调试
你能提供你的代码吗？？
使用 jquery 附加点击事件，加上代码比它需要的要复杂得多。

标签： javascript jquery css

【解决方案1】：

你是说这个吗？

Please see this JSFiddle Demo

我没有更改您的 CSS 或 HTML 代码。我从 HTML 页面和脚本文件中删除了所有脚本。

这只是我添加的

$( ".mini_boxes" ).on( "click", function() {
  $(".mini_boxes").css("background-color","#99CCFF");
   $(this).css("background-color","#0099FF");
});

【讨论】：

这不是答案。非常有用的评论。
哎呀，对不起。我误读了这个。我虽然只是小提琴中上述鳕鱼的副本。

【解决方案2】：

在您的开关盒中，您没有中断；针对所有情况的声明，添加这将解决您的问题，并且您将 #low_left 和 #low_right 分别输入错误为 #bottom_left、#bottom_right

【讨论】：

其实这是我复制粘贴的错误。我的所有案例都有中断语句，但它仍然不起作用。
嗨，阿贝。你有没有改变我的代码？它看起来与我正在使用的代码一模一样，但在你的 jsfiddle 中它可以工作。
我改变了我没有再说什么的两件事

【解决方案3】：

您的代码过于复杂，简化为两行

function boxClicked(event){
    $(".mini_boxes").css("background-color","#99CCFF");  //reset all of the elements to default color
    $(this).css("background-color","#0099FF");  //set the background of the one clicked
}
$("#mini_container").on("click",".mini_boxes", boxClicked);   //attach the event only to the table and use event bubbling to your advantage

【讨论】：

【解决方案4】：

here 是您在工作条件下的代码。您在错误的 ID 上实现了代码，并且在 switch - case 中缺少 break。

$(document).ready(function(){
  BuildHandler();
});

function BoxClicked(event){
  var targetBoxID = event.target.id;

  switch (targetBoxID)
  {
    case "top_left":
      $("#top_left").css("background-color","#0099FF");
      $("#top_right").css("background-color","#99CCFF");
      $("#low_left").css("background-color","#99CCFF");
      $("#low_right").css("background-color","#99CCFF");
      break;
    case "top_right":
      $("#top_left").css("background-color","#99CCFF");
      $("#top_right").css("background-color","#0099FF");
      $("#low_left").css("background-color","#99CCFF");
      $("#low_right").css("background-color","#99CCFF");
          break;
    case "low_left":
      $("#top_left").css("background-color","#99CCFF");
      $("#top_right").css("background-color","#99CCFF");
      $("#low_left").css("background-color","#0099FF");
      $("#low_right").css("background-color","#99CCFF");
          break;
    case "low_right":
      $("#top_left").css("background-color","#99CCFF");
      $("#top_right").css("background-color","#99CCFF");
      $("#low_left").css("background-color","#99CCFF");
      $("#low_right").css("background-color","#0099FF");
          break;
  }
}

function BuildHandler(){
  var theBoxes = document.getElementsByClassName("mini_boxes");
  for(i=0;i<theBoxes.length;i++){
    theBoxes[i].addEventListener('click', BoxClicked, false);
  }
}

CSS 更改：

#low_left{
  position:absolute;
  bottom:0px;
  left:0px;
}

#low_right{
  position:absolute;
  bottom:0px;
  right:0px;
}

【讨论】：