僅在第一次點擊時隱式點擊動畫？

Question

我有多個帶有rel="<img src"#"/>"錨標記。

當我單擊任何<a></a> ，我會使用fadeIn效果在另一個div中顯示帶有rel值的大圖像。

我想做的是檢查大圖像是否具有與錨的rel相同的src ，如果有，請防止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是否等於clicked元素的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;
  });
});

附：

未經測試，但應該可以正常工作！