JS onclick事件处理程序-不响应

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

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

至于你的评论：

// <-为什么不只是img.onclick = unblur？

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

 (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);

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

JS onclick事件处理程序-不响应

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-09-19 23:11:22

JS onclick事件处理程序-不响应

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-09-19 23:11:22

解决方案1
0 已采纳 2016-09-19 23:11:22