按鈕點擊顯示與fancybox插件相同的圖像

Question

我有一些按鈕具有相同的id - previewPhoto。我正在使用fancybox來顯示照片。但是所有按鈕都顯示相同的圖像。哪裏可能是問題，我的'照片'和'身份證'變種是不同的。

$(function() { 
    $('button#previewPhoto').each(function() { 
     photo = $(this).val(); 
     id = $(this).attr("title"); 
     link = 'http://domain.com/members/photos/'+id+'/'+photo; 
     $(this).click(function() { 
      $.fancybox({ 
       //'orig'   : $(this), 
       'padding'  : 0, 
       'href'   : link, 
       'transitionIn' : 'elastic', 
       'transitionOut' : 'elastic' 
      }); 
     }); 
    }); 
}); 

Answer 1

你不需要.each()，只要做到這一點：

jQuery(function ($) { 
    $(".previewPhoto").on("click", function() { 
     var photo = $(this).val(), 
      id = this.title, 
      link = 'http://farm8.staticflickr.com/' + id + '/' + photo; 
     $.fancybox(link, { 
      // API options here 
     }); 
    }); 
}); 

見JSFIDDLE

注意：.on()需要的jQuery v.1.7 +