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

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>

另外，作为旁注，如果您在条件语句中检查变量之前知道变量是 bool 值，则应该使用 === 或简单地 if(myVar) 或 if (!myVar) 分别用于检查 true 和 false 条件。

我希望这会有所帮助。