jQuery 存储和引用项目数组答案

【问题标题】：jQuery storing and referring to an array of itemsjQuery 存储和引用项目数组
【发布时间】：2009-12-06 17:55:41
【问题描述】：

我不完全是我在 jQuery/Javascript 术语中寻找的东西。我正在寻找的行为类似于具有以下元素的典型灯箱幻灯片：

项目列表
点击一个项目会弹出一个引用列表中项目的新元素
而新元素包括指向项目列表的下一个/上一个导航。

我正在构建类似的东西，并且正在寻找处理上述问题的技术方法。

我有这个示例代码：

<ul>
    <li><a href="samplelink.html">item 1</a></li>
    <li><a href="anotherlink.html">item 2</a></li>
    <li><a href="onemorelink.html">item 3</a></li>
</ul>

我进行了一些设置，以便每个 LI A 获得一个单击事件，该事件在页面上创建一个新的叠加 DIV，然后在其中执行一个 .load($(this).attr('href))。

一切都很好。

我不知道该怎么做，将我点击的 LI 的哪个索引传递给新的 div，这样我就可以添加正确的 prev/next 链接，并实际引用原始列表中的 next/prev 元素。具体的例子，如果我点击第二个列表项，在我创建的新 DIV 中，我如何将“它是打开这个的第二个链接”的信息传递给它。

【问题讨论】：

标签： jquery arrays

【解决方案1】：

在您的 div 代码中，您可以再次选择与传递的 href 值匹配的项目，并使用 next() 和 prev() 来获取给定元素的其他兄弟。

【讨论】：

我应该如何将 href 值放入 div 以匹配它？我想我每次都可以将它传递给一个隐藏的链接。

【解决方案2】：

试试这个：

<ul>
    <li><a href="1">item 1</a></li>
    <li><a href="2">item 2</a></li>
    <li><a href="3">item 3</a></li>
</ul>

<a id="next">next</a>
<a id="prev">prev</a>

<script>
$('ul').bind('click', function(e) {
    var target = $(e.target);
    if (!target.is('a')) {
      return;
    }
    var li = target.parent();
    console.log('opening: '+target.attr('href'));

    var next = li.is(':last-child') ? li.siblings(':first') : li.next();
    var prev = li.is(':first-child') ? li.siblings(':last') : li.prev();

    $('#next').unbind('click').bind('click', function(e) {
        next.children('a').trigger('click');
    })
    $('#prev').unbind('click').bind('click', function(e) {
        prev.children('a').trigger('click');
    })
    e.preventDefault();
})
</script>

【讨论】：

【解决方案3】：

当您创建div 时，使用jQuery data 功能基本上“链接”两个DOM 元素：

$("ul li a").click(function(e){
    var $this = $(this);
    $("<div class='overlay'></div>")
        .data('trigger', $this)
        .appendTo(body)
        .load($this.attr('href'));
    e.preventDefault();
});

然后您可以使用.live 事件来捕获覆盖divs 中next 和previous 的点击：

$("div.overlay a.next").live('click', function(e){
   var $div     = $(this).closest('div.overlay'),
       $trigger = $div.data('trigger'),
       $next    = $trigger.parent().next();

   if($next.length){
      // It got the next li
      // $next.find('a') would select the link

   } else {
      // It reached the end
      $next = $("ul li:first"); // Grab first now
      // $next.find('a') would select the link
   }
});

为prev写几乎相反的内容。

【讨论】：