Question

有两个类.egg的div。用户应该单击他们想要更改背景颜色的div，然后单击div的新背景颜色。总共两步。我编写了一个jQuery函数来捕获为背景更改选择的div的id，然后将id颜色更改为背景。效果很好，除了选择新div时，要更改背景颜色，之前选择的div id仍然存储在名为clickedId的变量中。

为了尝试解决此问题，我在为所选div更改了背景后设置了clickedId = '';。但是，当选择新div时，它不再起作用。控制台说Cannot read property 'style' of null。它看起来像代码的第一部分，$(".egg").click(function() {...不会被执行以进行新的div选择。

有人对此有任何建议或意见吗？提前谢谢！

jQuery代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      //Select the div to change the background color
      $(".egg").click(function() {
          var clickedId = $(this).attr("id");

        //Updating the background color for selected div
        $(".color").click(function() {
            var clickedColor = $(this).attr("id");
            if(clickedColor == 'red'){
              document.getElementById(clickedId).style.backgroundColor = "red";
              clickedId = '';
              return;
            }else if(clickedColor == 'blue'){
              document.getElementById(clickedId).style.backgroundColor = "blue";
              clickedId = '';
              return;
            }else if (clickedColor == 'yellow') {
              document.getElementById(clickedId).style.backgroundColor = "yellow";
              clickedId = '';
              return;
            }else{
              document.getElementById(clickedId).style.backgroundColor = "white";
              clickedId = '';
              return;
            }
          });
       });
     });
    </script>

HTML代码：

<body>
    <div id="egg-main">
      <div id="left-egg"></div>
      <div id="center-egg1" class="egg" onclick="semi_left()"></div>
      <div id="center-egg2" class="egg" onclick="semi_right()"></div>
      <div id="right-egg"></div>
      <div id="bottom">
        <div id="red" class="color"></div>
        <div id="blue" class="color"></div>
        <div id="yellow" class="color"></div>
        <div id="white" class="color"></div>
      </div>
    </div>
    <script src="demo.js"></script>
  </body>

Answer 1

为什么它无法正常工作

看起来问题是.color的事件监听器是在.egg的事件监听器中声明的。这意味着每次点击.egg时，都会为.color创建新的事件处理程序。

第二次点击.color时，它仍然会在您第一次点击时运行事件。而且，由于您已将id更改为''，因此getElementById('')确实为null。

可能的解决方案

将.color事件侦听器移到.egg事件侦听器之外。您还必须更改clickedID变量的范围。

$(document).ready(function(){ var clickedId = ''; //Select the div to change the background color $(".egg").click(function() { clickedId = $(this).attr("id"); alert(clickedId); }); //Updating the background color for selected div $(".color").click(function() { var clickedColor = $(this).attr("id"); if(clickedId != '') document.getElementById(clickedId).style.backgroundColor = clickedColor; }); });

jQuery没有更新变量信息

1 个答案:

为什么它无法正常工作

可能的解决方案