数组项作为列表和嵌套列表

时间:2012-05-21 16:25:59

标签: javascript jquery jquery-plugins supersized

我为每个背景页面都有一组图像,我使用数组根据我单击的菜单项加载每个图像。菜单项也有子菜单,整个菜单系统应与数组项“同步”:

html菜单:

Home (page 1) (menu item hidden but should be "Menu 1" if it would be displayed)

 <ul id="menu">
    <li><a href="page2">Menu 2</a></li>
    <li><a href="page3">Menu 3</a> 
          <ul id="sub-menu">
               <li><a href="page4">Menu 4</a></li>
          </ul>
    </li>
    <li><a href="page5">Menu 5</a></li>
 </ul>

阵列:

[0] 1.jpg (image for the home where the menu name item isn't displayed)
[1] 2.jpg (this should be for Menu 2)
[2] 3.jpg (this should be for Menu 3)
[3] 4.jpg (this should be for Menu 4)
[4] 5.jpg (this should be for Menu 5)

当网站加载时,会读取[0] 1.jpg,这是主页。但我们可以点击的第一项是“菜单2”,因为“主页”按钮没有显示在菜单中,它应该转到[1] 2.jpg。

这是我使用的jQuery:

jQuery (function($) {
  $("#menu .menu li").each(function (index) {
    var item = $(this);
    $("a", item).click(function (e) {
        e.preventDefault();
        api.goTo(index+1);
    });
   });
});

使用“api.goTo(index + 1);” (在这里使用超大插件)我说(或者我认为我是)在第一次单击菜单项时,转到索引+ 1,它应该是[1]但它不是,它看起来仍然是[0]用于主页tho。此外,我认为嵌套的项目仍将遵循索引序列。

基本上我无法为正确的页面获取正确的图像。这就像我没有根据我点击的菜单项导航数组。

P.S。在这种情况下,索引是jquery循环中项目的基于0的索引

1 个答案:

答案 0 :(得分:1)

我不知道你在做什么,但是你使用变量绑定循环中的click函数,变量将会改变,结果将不是你所期望的。

也许这会有所帮助?

$('a', 'li').on('click', function(e) {
     e.preventDefault();
     var index = this.href.replace('page', '');
     api.goTo(index);
});

由于子菜单只是从点击href获得正确的数字似乎最简单。

在引用数组中的值时,您可以执行以下操作:

var index = ['1.jpg', '2.jpg', '3.jpg'] //an array, starts with zero

var firstimage = index[0]; //this variable is now the string "1.jpg"

我猜你只是将一个数字传递给api.goTo(number)函数,并且该函数找到了数组中的图像链接,至少这对我来说是什么样的?