从列表元素中创建 javascript 对象

Question

我在从无序列表中的列表项中创建对象时遇到了一个小问题。我正在创建一个画廊，我需要每个画廊缩略图都是它自己的对象，所以我使用 jQuery 的 $.each() 迭代每个列表项

问题是我不知道如何给每个对象/li 赋予它自己的实例名称。

代码如下：

    function galleryButton(){
        this.link
        this.name
        this.image
        this.identifier,
        this.goPage = function(){
        $('.container').animate({opacity : '0'}, 500).load(this.link + ' .galContainer', function(){$('.container').animate({opacity : '1'})});
        return false;
        }
    }

    $(document).ready(function(){
        $.ajaxSetup({
            cache:false
        });

        $('.gallery li a').each(function(node, value){
            this = new galleryButton();
            this.link = $(this).attr('href');
            this.name = $(this).attr('name');
            this.image = $(this + " img").attr('src');
            this.identifier = $(this).attr('data-pic-id');

            $(this).click(this.goPage);
        })

        $('.goback').click(function(){

            var back = $(this).attr('href');
            $('.container').animate({opacity : '0'}, 500).load(back + ' .gallery', function(){$('.container').animate({opacity : '1'})});
                return false;
        });

    });

Answer 1

不要将您的 galleryButton 存储到“this”变量中。创建一个新的变量，

var myGalleryButton = new galleryButton();

并更新您的作业：

myGalleryButton.link = $(this).attr('href');
/// etc

然后在 .each() 函数结束时，将 myGalleryButton 推送到数组/对象以供以后访问。

Answer 2

这没有任何意义：

   $('.gallery li a').each(function(node, value){
        this = new galleryButton();
        this.link = $(this).attr('href');
        this.name = $(this).attr('name');
        this.image = $(this + " img").attr('src');
        this.identifier = $(this).attr('data-pic-id');

        $(this).click(this.goPage);
    });

你不想覆盖this，你想创建一个新对象，比如：

        var slide = new galleryButton();
        slide.link = $(this).attr('href');
        slide.name = $(this).attr('name');
        slide.image = $(this + " img").attr('src');
        slide.identifier = $(this).attr('data-pic-id');

所以在这种情况下slide 是实例名称，但它只会存在于每个回调函数的该函数范围内。

现在，如果您需要能够访问这些对象，那么您要么需要在函数外部创建变量，要么将它们放在其他可访问的地方。如果是我，我会将它们存储在data 中，以供li 之类的：

        var slide = new galleryButton();
        slide.link = $(this).attr('href');
        slide.name = $(this).attr('name');
        slide.image = $(this + " img").attr('src');
        slide.identifier = $(this).attr('data-pic-id');
        $(this).closest('li).data('slide', slide);

然后你可以像$(someSelectorToGetTheLI).data('slide')一样访问它们。