Question

我有多个锚标签，其中包含rel="<img src"#"/>"。

当我点击任何<a></a>时，我会使用fadeIn效果在rel值的另一个div中显示一个大图像。

我想要做的是检查大图像是否与锚点的src具有相同的rel，如果是，则阻止fadeIn效果。

 $(document).ready(function () {

   $("a.largeimg").click(function () {
     var image = $(this).attr("rel");           
     $('.main-product-image').html('<img src="' + image + '"/>');
     $('.main-product-image img').hide();
     $('.main-product-image img').fadeIn();
     return false;

     if(src == image) {

      $('.main-product-image img').show();

     }

   });

Answer 1

您可以检查锚点的rel和图像的src是否相同，如果是，则在淡入代码之前转义函数，如下所示：

var src = $('.main-product-image img').attr("src");
if (src == image) return false;

Answer 2

如果我理解你的问题是正确的，那么在动画之前你需要确认图像的src是否等于被点击元素的rel属性，从而阻止了动画！

<强> JQUERY

$(document).ready(function () {

  // use bind when targeting many elements
  $("a.largeimg").bind("click", function () {

    var $target = $('.main-product-image'),         // target element
        src     = $target.find('img').attr("src"),  // src from existent image
        image   = $(this).attr("rel");              // rel from clicked element

    // if src different from image
    if (src != image) {
      $target.html('<img src="' + image + '"/>');   // append new image
      $target.find('img').hide().fadeIn();          // perform the animation
    }

    // prevent the browser from continuing to bubble the clicked element
    return false;
  });
});

<强> PS：

未经测试，但应该可以正常使用！

只在第一次点击时点击即可实现动画？

2 个答案: