Question

此代码可确保在投资组合图像的页面上单击图像以转到相应的图库时，单击的图像将显示为第一个图像。它通过比较src属性中的字符和使用.prependTo来完成此操作。当我使用页面上的链接在组合和画廊页面之间来回导航时，一切正常，但是当我使用浏览器上的后退按钮时，一切都变得不稳定，有时会反复进行前置。是否与点击事件一次又一次地触发有关？我不确定......

$(document).on('click',"a.project",function(){
  $("a.project").on('click', function(event) {
    var portfolioLastTwoChars = $(event.target).attr('data-src').slice(-8, -4);
    var galleryLastTwoChars = $("img").first().attr('data-src').slice(-8, -4);
  if (portfolioLastTwoChars === galleryLastTwoChars) {
   return;
  } else {
   var prePendedImage = $("div").children('img[alt*=' + portfolioLastTwoChars + ']').not(".loaded");
   $(prePendedImage).not(':first').remove();
   prePendedImage.prependTo("div.image-list");
   $('div.image-list > img:not(:first-child)').remove();
}
});
});

$( document ).ready(function() {
 $("a.project").eq(0).trigger('click');
});

Answer 1

Is there a cross-browser onload event when clicking the back button?

后退按钮因搞乱javascript脚本而臭名昭着。有几个链接可能指向缓存作为一个问题。

这可能不是一个正确的答案，但我没有足够的观点对SO发表评论。

在$（“a.project”）。click事件之前，您是否有HTML默认值的示例？

Answer 2

我相信这可能是由于你要添加的类...因此我在点击中删除了那些，然后使用jQuery链的优点简化了代码。

$(document).ready(function() {
  $("a.project").on('click', function(event) {
    // remove old classes
    $('.moveMe').removeClass('moveMe');
    $('firstGalleryImage').removeClass('firstGalleryImage');
    // get the characters of the clicked element
    var portfolioLastTwoChars = $(event.target).attr('data-src').slice(-8, -4);
    var galleryLastTwoChars = $("img").first().addClass("firstGalleryImage").attr('data-src').slice(-8, -4);
    if (portfolioLastTwoChars === galleryLastTwoChars) {
      return;
    } else {
      $('img[alt*=' + portfolioLastTwoChars + ']').addClass("moveMe");
      $("div").children('.moveMe').not(".loaded").prependTo("div.image-list");
    }
  });
});

现在，关于你文件中的奇怪function getImageName()准备好了，不确定你究竟在尝试什么;如果您尝试为$("a.project").on('click',重新执行该事件处理程序，那么这实际上可能是您的问题。如果您只想执行单击处理程序，如果不是，您希望将其附加到某些新元素那么也许你需要以不同的方式附加它，例如：

$(document).on('click',"a.project",function(){...

将$(document)放在a.project元素的某个包装上，以提高效率。

然后你可以从

的某个地方触发

$("a.project").trigger('click');

请注意，可能需要在某些其他元素（图像？）上激活触发器，例如:(很难猜到没有任何标记）

$("a.project").find('img').eq(0).trigger('click');

为什么浏览器上的后退按钮会破坏此代码？它起作用了

2 个答案: