如何将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);

var flickrhelpers=null；
（函数（jQuery）{
jQuery.fn.flickrGallery=函数（args）{
var$element=jQuery（this），//引用当前DOM元素的jQuery版本
element=this；//对实际DOM元素的引用
//公共方法
var方法={
init：函数（）{
//扩展默认选项
settings=jQuery.extend（{}，默认值，args）；
//确保传递了api密钥和setID
if（settings.flickrey==null | | settings.flickrSet==null）{
警报（“您必须传递API密钥和Flickr设置ID”）；
返回；
}
//纵横比的CSS JQF对象溢出
css（“溢出”、“隐藏”）；
//获取Flickr集：）
$.getJSON（“http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=“+settings.flickrSet+”&api_key=“+settings.flickrey+”&jsoncallback=？”，函数（flickrData）{
变量长度=1；
var thumbHTML=''；
对于（i=0；i h）{
var fRatio=w/h；
$（“.thsImage”）.css（“width”，element.width（））；
$（“.thsImage”）.css（“高度”，数学圆（element.width（）*（1/fRatio））；
}否则{
var fRatio=h/w；
$（“.thsImage”）.css（“height”，element.height（））；
$（“.thsImage”）.css（“宽度”，数学圆（element.height（）*（1/fRatio））；
}
if（element.outerHeight（）>$（“.thsImage”）.outerHeight（））{
var thisHalfImage=$（“.thsImage”）.outerHeight（）/2；
var thisTopOffset=（element.outerHeight（）/2）-thisHalfImage；
$（“.thsImage”）.css（“页边距顶部”，thistooffset+“px”）；
}
if（settings.titleArray[currentIndex]！=“”）{
$（“.flickr_count”）.append（settings.titleArray[currentIndex]）；
}
});
},
切换：函数（）{
$（“#flickr_拇指”）.slideUp（“慢”）；
}
}
//万岁
var默认值={
“flickrSet”：空，
“flickrKey”：空，
“x”：0，//对象x
“y”：0，//对象y
“c”：0，//对象中心点
“ct”：0，//从顶部开始的对象中心点
“mX”：0，//鼠标X
“mY”：0，//鼠标Y
“imgArray”：[]，//用于保存flickr图像URL的数组
“titleArray”：[]，//用于保存图像标题（如果存在）的数组
“currentIndex”：0，//默认图像索引
“fImg”：null，//用于检查是否加载了映像JQFAbject。
}
//用于扩展默认值！
变量设置={}
//这件事
jQuery（文档）.ready（函数（）{
方法init（）；
});
//有点像init（），但如果浏览器调整大小，则会重新定位动态元素。
$（窗口）。调整大小（函数（）{
//获取Flickr jqfobj将加载到的元素的位置
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）；

我在这里可能错了，但不会错（在您的

flickrGallery

对象中）

---

我可能在这里错了，但不会（在您的

flickrGallery

对象中）

---

最大的问题在于

$。每个
循环。我将假设插件将适用于您正在循环的所有元素，尽管我怀疑它会起作用

当您在每次传递中选择
$（'.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"
                });

        });
    });

EDIT同样的使用
find（）
的概念也应该在插件中重构为代码。插件应该用类替换所有ID

对于一个页面中的多个实例，插件的构造看起来确实不太好
最大的问题在于你的
$。每个
循环。我将假设插件将适用于您正在循环的所有元素，尽管我怀疑它会起作用

当您在每次传递中选择
$（'.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"
                });

        });
    });

EDIT同样的使用
find（）
的概念也应该在插件中重构为代码。插件应该用类替换所有ID

对于一个页面中的多个实例，插件的构造看起来确实不太好
代码中的任何地方都没有while循环。您是否碰巧阅读了有关如何使用此插件的内容？while循环工作得很好，它不是problem@joseph我做了，但我正在修改，给出的代码只适用于单个画廊，但是我已经将它调整为在一个表格中显示多个集合。你可以粘贴你正在处理的HTML、图片的数据而不是插件代码吗？你的代码中没有while循环。你是否碰巧读过如何使用这个插件？while循环工作得很好，它不是problem@joseph我做了但我正在改变它，给出的代码仅适用于单个库，但我已将其修改为在一个表中显示多个集。您是否愿意粘贴
$(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"
                });

        });
    });