Question

我想要实现的目标：如果图像模糊，点击任何图像都应该显示清晰的图像;如果图像清晰，则应该模糊图像

发生了什么：单击模糊图像会清除图像，但再次单击它不会执行任何操作。所以，点击清晰的图像不会模糊它（应该如此）。

这是我的代码：

<script>

    window.onload = init;

    function init(e) {
        var img = document.getElementsByTagName("img"); 
        //var img = document.getElementById('pics');

        img[0].onclick = unblur;  // <- why not just img.onclick = unblur ??
        img[1].onclick = unblur;
        img[2].onclick = unblur;

        console.log(img);
/*
        var imageId = e.target.id;  //zero
        var img = document.getElementById(imageId);
        */

        //img.onclick = unblur;
    }

    function unblur(e) {

        var imageId = e.target.id;  //zero
        var img = document.getElementById(imageId);

        var imageSource = img.src; //zeroblur.jpg

        var clearImg = imageSource.substring(0, imageSource.length - 8);

        var unblurredImg = imageId.concat('.jpg');   // zero.jpg
        var blurredImg = imageId.concat('blur.jpg'); // zeroblur.jpg

        console.log(imageSource);
        console.log(img.src);
        //console.log(imageSource);


        if (img.src == unblurredImg) {  
            img.src = blurredImg;
        } else {
            img.src = unblurredImg;  // image is clear, so hide the pic
        }   

/*
         if (img.src == blurredImg) {
                img.src = unblurredImg;
        }
    } */
    //}
    } 

    /*  
        //if (!(imageId instanceof img)) {
        if (imageId !== "pics") {
            if (img.src == blurredImg) {  
                img.src = unblurredImg; 
             } else if (img.src == unblurredImg) {
                img.src = blurredImg;
             }   // image is blurred, so reveal the pic
        else {
            console.log("hi");
        }

        //debugger;
    }
}
*/
        /*
        var img = document.getElementById('zero');
        img.src = "zero.jpg";
        */



</script>

</head>

<body>
<div id="pics">
<img id="zero" src="zeroblur.jpg">
<img id="one" src="oneblur.jpg">
<img id="two" src="two.jpg">

</div>

</body>
</html>

我还注意到，如果我将函数unblur（e）中的条件切换为以下内容......

if (img.src == unblurredImg) {  
    img.src = blurredImg;
} else {
    img.src = unblurredImg;  
}

如果用户点击模糊图像，则根本没有响应，而在之前（上面的代码），模糊图像将至少显示清除的图像。

为什么会这样？我发现两者之间没有区别，只是改变了条件的顺序。

Answer 1

您的示例中存在各种错误。请查看代码片段，了解您要实现的目标。

至于你的评论：

//＆lt; - 为什么不只是img.onclick = unblur ??

因为document.getElementsByTagName返回一个元素数组。因此，您必须遍历元素以将onclick处理程序应用于每个元素。

＆＃13;

(function(document) {
  var array = document.getElementsByTagName("img");
  for (var i = 0; i < array.length; i++) {
    array[i].onclick = toggleBlur;
  }

  function toggleBlur(event) {
    var img = event.target;
    var oldSrc = img.src; // Save to display in the console
    if (img.src.endsWith("blur.jpg")) {
      img.src = img.id + ".jpg";
    } else {
      img.src = img.id + "blur.jpg"
    }
    console.log(oldSrc + " -> " + img.src + " on element.id=" + img.id);
  }
})(document);

＆＃13;

<body>
  <div id="pics">
    <img id="zero" src="zero.jpg">
    <img id="one" src="one.jpg">
    <img id="two" src="twoblur.jpg">
  </div>
</body>

＆＃13;

JS onclick事件处理程序 - 没有响应

1 个答案: