Question

我的网页上有4张图片，当我点击其中一张图片时，点击的图片会突出显示。我实现了这个：

JS1：

var ImageSelector = function() {
  var imgs = null;
  var selImg = null;

  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(selImg)   {
                 selImg.className = "normal";
              }
              this.className = "highlighted";
              selImg = this;
              urlSet(this.src);
           };
        }
     }
  };
}();

JS 2：

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

CSS：

   .normal {
      border:none;
   }
   .highlighted {
     border:8px solid #19A3FF;
   }

我已插入一个jQuery代码，显示文件夹中的所有图像，即：

var dir = "images/";
var fileextension = ".jpg";
$.ajax({
    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
    url: dir,
    success: function (data) {
        //Lsit all png file names in the page
        $(data).find("a:contains(" + fileextension + ")").each(function () {
            var filename = this.href.replace(window.location, "").replace("http://example.com/", "");
            $(".menu").append($("<img src=" + dir + filename + " width=300 height=300>"));
        });
    }
});

HTML代码就是这样：

    <div>
        <div id="menu" class = "menu">
</div></div>

当我插入jQuery代码时，图像会显示但不再可点击。如何让它们再次点击？感谢。

Answer 1

Mohit Arora - 在追加图像或使用委托后，在成功事件中调用您的函数ImageSelector。

我将解释原因，这是因为您在加载图像之前设置了.onclick函数。在代码之后执行ajax调用，因为ajax是异步的。如果你想通过ajax调用任何东西，总是在succes事件中执行它。

自动生成的图像无法点击

1 个答案: