Question

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title>imagegame</title>
        <style>
        body { margin: 20px; }
        img { margin: 20px; }
        </style>
    </head>
    <body>
        <img id="pic1" src="img/charpter9/zeroblur.jpg">
        <img id="pic2" src="img/charpter9/oneblur.jpg">
        <img id="pic3" src="img/charpter9/twoblur.jpg">
        <img id="pic4" src="img/charpter9/threeblur.jpg">
        <img id="pic5" src="img/charpter9/fourblur.jpg">
        <img id="pic6" src="img/charpter9/fiveblur.jpg">

        <script>

        function init() {
            var imgs = document.getElementsByTagName("img");
            for(var i = 0; i < imgs.length; i++){
                imgs[i].onclick = onClick;
            }
        }
        function onClick(e){
            var img = e.target;
            var imgsrc = img.src;
            var imgid = img.id;
            var imgsrc0 = imgsrc;
            imgsrc = imgsrc.replace("blur","");
            img.src = imgsrc;
            setTimeout(refresh, 5000, imgsrc0, imgid);
        }

        function refresh(imgsrc,id){
            var img = document.getElementById(id);
            img.setAttribute("src",imgsrc);
        }
        window.onload = init;
        </script>
    </body>
</html>

上面是代码，我主要考虑的是在单击触发为onclick的元素时是否有解决鼠标双击的计划。

我发现的错误是当我双击页面上显示的图像时，图片无法自动重新模糊。案例是关于页面142的第九章从头开始。

谢谢您的时间。

enter image description here

Answer 1

主要问题是，src第二次不再具有模糊性，并且第二次超时完成时，它将被设置为src而不是具有模糊性的那个。 / p>

您可以将原始源保留在数据属性中，并在该属性上重新设置src。此外，您可以取消双击的setTimeout()。

function onClick(e){
    var img = e.target;
    var imgsrc = img.src;
    var imgid = img.id;
    var imgsrc0 = imgsrc;

    //REM: Keep the original src
    if(!img.getAttribute('data-img-src')){
        img.setAttribute('data-img-src', imgsrc)
    };

    imgsrc = imgsrc.replace("blur","");
    img.src = imgsrc;

    //REM: Clear and reassign the timeout
    clearTimeout(img.timeout); //REM: Dirty way, but fast to show
    img.timeout = setTimeout(refresh, 5000, imgsrc0, imgid)
}

function refresh(imgsrc,id){
    var img = document.getElementById(id);

    //REM: Set the original src
    img.setAttribute("src",img.getAttribute('data-img-src'));
    img.removeAttribute('data-img-src')
}

但是，我认为将所有图像保留在一个对象中并即时创建img会容易得多。此外，它还使您的代码不受图像源中的固定命名方案的束缚。例如：

var _Images = [
  {Blurred: 'https://image.flaticon.com/icons/svg/172/172838.svg', Active: 'https://image.flaticon.com/icons/svg/196/196138.svg'},
  {Blurred: 'https://image.flaticon.com/icons/svg/196/196138.svg', Active: 'https://image.flaticon.com/icons/svg/172/172838.svg'},
  {Blurred: 'https://image.flaticon.com/icons/svg/172/172838.svg', Active: 'https://image.flaticon.com/icons/svg/196/196138.svg'}
];

window.onload = function(){
  for(var i=0, j=_Images.length; i<j; i++){
    var tImage = document.body.appendChild(document.createElement('img'));
    tImage.src = _Images[i].Blurred;
    tImage.setAttribute('width', '20px');
    tImage.onclick = function(image){
      this.src = image.Active;
      
      window.clearTimeout(image.Timeout);
      image.Timeout = window.setTimeout(function(){
        this.src = image.Blurred
      }.bind(this, image), 5000)
    }.bind(tImage, _Images[i])
  }
};

双击img元素以触发点击事件时，JavaScript错误

1 个答案: