如何将javascript函数应用于多个div类？

Question

我有一个函数可以创建一个从我的flickr账户中拉出的flickr集。我从数据库中获取设置的数字，并使用while循环显示集合中的第一个图像。表中的每个元素都有相同的类，我正在为它们应用Javascript函数。不幸的是，每个表格元素都显示相同的照片，最后一张从数据库中拉出来。

$(document).ready(function() { 
     var flickrUrl=""; 
     $('.gallery_table_data').each(function(){ 
       flickrUrl = $(this).attr('title'); 
       $('.flickr_div').flickrGallery({ 

        "flickrSet" : flickrUrl, 
        "flickrKey" : "54498f94e844cb09c23a76808693730a" 
       }); 



     }); 
    }); 

和图像不显示在所有？谁能帮忙？ 这里是万一Flickr的jQuery的是这样的问题：

var flickrhelpers = null; 

(function(jQuery) { 

jQuery.fn.flickrGallery = function(args) { 

    var $element = jQuery(this), // reference to the jQuery version of the current DOM element 
     element = this;   // reference to the actual DOM element 

    // Public methods 
    var methods = { 
     init : function() { 
      // Extend the default options 
      settings = jQuery.extend({}, defaults, args); 

      // Make sure the api key and setID are passed 
      if (settings.flickrKey === null || settings.flickrSet === null) { 
       alert('You must pass an API key and a Flickr setID'); 
       return; 
      } 



      // CSS jqfobject overflow for aspect ratio 
      element.css("overflow","hidden"); 

      // Get the Flickr Set :) 
      $.getJSON("http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=" + settings.flickrSet + "&api_key=" + settings.flickrKey + "&jsoncallback=?", function(flickrData){ 

       var length = 1; 
       var thumbHTML = ''; 

       for (i=0; i<length; i++) { 
        var photoURL = 'http://farm' + flickrData.photoset.photo[i].farm + '.' + 'static.flickr.com/' + flickrData.photoset.photo[i].server + '/' + flickrData.photoset.photo[i].id + '_' + flickrData.photoset.photo[i].secret +'.jpg' 

        settings.imgArray[i] = photoURL; 
        settings.titleArray[i] = flickrData.photoset.photo[i].title; 
       } 



       // Get the position of the element Flickr jqfobj will be loaded into 
       settings.x = element.offset().left; 
       settings.y = element.offset().top; 
       settings.c = settings.x + (element.width()/2); 
       settings.ct = settings.y + (element.height()/2); 





       // When data is set, load first image. 
       flickrhelpers.navImg(0); 

      }); 

     } 
    } 

    // Helper functions here 
    flickrhelpers = { 
     navImg : function (index) { 
      // Set the global index 
      currentIndex = index; 




      // Create an image Obj with the URL from array 
      var thsImage = null; 
      thsImage = new Image(); 
      thsImage.src = settings.imgArray[index]; 

      // Set global imgObj to jQuery img Object 
      settings.fImg = $(thsImage); 

      // Display the image 
      element.html(''); 
      element.html('<img class="thsImage" src=' + settings.imgArray[index] + ' border=0>'); 

      // Call to function to take loader away once image is fully loaded 
      $(".thsImage").load(function() { 
       // Set the aspect ratio 
       var w = $(".thsImage").width(); 
       var h = $(".thsImage").height(); 
       if (w > h) { 
        var fRatio = w/h; 
        $(".thsImage").css("width",element.width()); 
        $(".thsImage").css("height",Math.round(element.width() * (1/fRatio))); 
       } else { 
        var fRatio = h/w; 
        $(".thsImage").css("height",element.height()); 
        $(".thsImage").css("width",Math.round(element.height() * (1/fRatio))); 
       } 

       if (element.outerHeight() > $(".thsImage").outerHeight()) { 
        var thisHalfImage = $(".thsImage").outerHeight()/2; 
        var thisTopOffset = (element.outerHeight()/2) - thisHalfImage; 
        $(".thsImage").css("margin-top",thisTopOffset+"px"); 
       } 



       if (settings.titleArray[currentIndex] != "") { 
        $(".flickr_count").append(settings.titleArray[currentIndex]); 
       } 


      }); 


     }, 
     toggleUp : function() { 
      $("#flickr_thumbs").slideUp("slow"); 
     } 
    } 

    // Hooray, defaults 
    var defaults = { 
     "flickrSet" : null, 
     "flickrKey" : null, 
     "x" : 0, // Object X 
     "y" : 0, // Object Y 
     "c" : 0, // Object center point 
     "ct" : 0, // Object center point from top 
     "mX" : 0, // Mouse X 
     "mY" : 0, // Mouse Y 
     "imgArray" : [], // Array to hold urls to flickr images 
     "titleArray" : [], // Array to hold image titles if they exist 
     "currentIndex" : 0, // Default image index 
     "fImg" : null, // For checking if the image jqfobject is loaded. 
    } 

    // For extending the defaults! 
    var settings = {} 

    // Init this thing 
    jQuery(document).ready(function() { 
     methods.init(); 
    }); 

    // Sort of like an init() but re-positions dynamic elements if browser resized. 
    $(window).resize(function() { 
     // Get the position of the element Flickr jqfobj will be loaded into 
     settings.x = element.offset().left; 
     settings.y = element.offset().top; 
     settings.c = settings.x + (element.width()/2); 
     settings.ct = settings.y + (element.height()/2); 


    }); 



} 


})(jQuery); 

Answer 1

我可能是错在这里，但不会这（在您的flickrGallery对象）

$("body").append('<div id="flickr_loader"></div>');` 

创建具有相同ID的多个元素？而在flickrhelpers相同的图像：

element.html('<img id="thsImage" src=' + settings.imgArray[index] + ' border=0>'); 

Answer 2

最大的问题是在你的$.each循环。我将假设这个插件将适用于你正在循环的所有元素，尽管它怀疑它会。

当您选择每个$('.flickr_div')通过它会影响页面的所有元素与一流的...所以只循环的最后一关是有效的

$(document).ready(function() { 
     var flickrUrl=""; 
     $('.gallery_table_data').each(function(){ 
       flickrUrl = $(this).attr('title'); 

       /* this is your problem , is selecting all ".flickr_div" in page on each loop*/ 
       //$('.flickr_div').flickrGallery({ 

       /* without seeing your html structure am assuming 
       next class is inside "this" 

       try: */ 

       $(this).find('.flickr_div').flickrGallery({ 

        "flickrSet" : flickrUrl, 
        "flickrKey" : "54498f94e844cb09c23a76808693730a" 
       }); 

     }); 
    }); 

编辑这同使用find()的概念应该也可以重新插入插件中的代码。插件应该用类替换所有的ID。

插件真的不查找多个实例构造良好的页面