Question

我遇到了路障，我不确定在哪里看。

我有一个200px到200px的div。在其中我有4个65px乘65px的其他div并且它们被定位为绝对并且与外部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;
}

任何指针都会非常感激。

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

Answer 2

在你的开关盒中，你没有休息;所有案例的陈述，添加将解决您的问题，并且您分别错误地将#low_left和#low_right分配到#bottom_left，＃bottom_right

Answer 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

Answer 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;
}

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

4 个答案: