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

我有一个函数可以创建从我的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);

最佳答案

最大的问题是在您的$.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替换为类。

对于页面内的多个实例，插件的构造看起来确实不好

关于javascript - 如何将javascript函数应用于多个div类？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9935542/