Question

我将其作为多选项工作，在第一次点击时突出显示每个图像，然后在第二次点击时不亮。但是，有时需要单击图像两次才能更改，有时只需要一次。我无法弄明白为什么！

这是我的代码：

var ImageSelector = function() {
              var imgs = null;
              //var selImg = null;
              var clicked = false;
              var unClicked = true;

              return {
                 addImages: function(container) {
                    imgs = container.getElementsByTagName("img");


                    for(var i = 0, len = imgs.length; i < len; i++) {
                       var img = imgs[i];

                        // img.className = "normal";


                       img.onclick = function()  {


                          if(unClicked == true)   {
                             this.className = "highlighted";
                             clicked = true;
                             unClicked = false;
                          }

                          else  if(clicked == true)   {
                             this.className = "normal";
                             clicked = false;
                             unClicked = true;
                          }



                       };
                    }
                 }
              };
           }();


var div = document.getElementById("Images");
              ImageSelector.addImages(div);

Answer 1

这里没有clicked / unClicked变量，因为你实际上在做的是在每张图片上切换一个类。

您的代码可以大规模缩减为：

var ImageSelector = function() {    
    return {
        addImages: function(container) {         
            container.onclick = function(e)  { 
                var target = e.target;                
                if(target.nodeName === "IMG") {
                    target.className = (target.className === "highlighted") ? "normal" : "highlighted";   
                }
            };            
        }
    };
}();

var div = document.getElementById("Images");
ImageSelector.addImages(div);

img {
   width: 100px;
   height: 100px;
   border: 1px black solid;
}

.highlighted {
    background-color: red;
}

.normal {
   
}

<div id="Images">
    <img />
    <img />
</div>

另外，作为附注，如果您在条件语句中检查变量之前知道您的变量是布尔值，则应使用===或仅if(myVar)或if(!myVar)来检查真实和虚假条件，分别。

我希望这会有所帮助。

突出显示和取消突出显示图像 - 单击问题

1 个答案: