Question

我正在尝试我的第一个灯箱插件并试图弄清楚如何处理设置导航控件。我知道它必须是一个简单的解决方案，但我完全是在思考这个问题。它支持html内容和图像，并使用标准的rel属性进行图库连接。我的问题是：如何基于rel将1图像（或div）导航到下一个？

起初我虽然$（this）.nextAll（'[rel =“ExampleGallery”]'）会起作用，但不幸的是，这并不针对下一个。所以...我可能完全偏离轨道，但是我现在要做的是如果循环调用插件的对象，检测它们是否有rel标签，然后如果他们确实将它们的值推入动态创建的数组中Gallery将名称命名为数组名称。然后只需使用数组中的索引来浏览对象......

HTML

<img src="images/pic1.png" width="230px" height="215px" rel="Gallery1"/>
<img src="images/pic2.png" width="230px" height="215px" rel="Gallery2"/>
<img src="images/pic3.png" width="230px" height="215px" rel="Gallery1"/>

ARRAY

Gallery1                  Gallery2

0 (ref to img tag 1)      0 (ref to img tag 2)
1 (ref to img tag 3)

再一次，我认为我做错了，对不起，如果这是关闭的话。我将如何为此编写JS？

1-基于rel名称动态创建数组 2-将对象推送到数组以便稍后引用

非常感谢！

Answer 1

我认为您应该重新考虑要用于此的数据结构。然而，为了简单地收集图像，这将起作用：

var arrays = {};
$('img').each(function(){
    var arrayName = $(this).attr('rel');
    if(arrays.hasOwnProperty(arrayName)) {
        arrays[arrayName].push(this);
    }
    else {
        arrays[arrayName] = [this];
    }
}

最后： arrays为{ Gallery1: [img1, img3], Gallery2: [img2] }

jQuery / JavaScript按属性设置数组

1 个答案: