Question

我不是我在jQuery / Javascript术语中寻找的东西。我正在寻找的行为类似于典型的灯箱幻灯片放映，其中包含以下元素：

项目列表
点击某个项目会显示一个引用列表中项目的新元素
而新元素包括引用回项目列表的next / prev导航。

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

我有这个代码示例：

<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获得一个click事件，在页面上创建一个新的overlay DIV，然后在其中执行.load（$（this）.attr（'href））。

一切都很好。

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

Answer 1

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

Answer 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>

Answer 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事件来获取叠加层next中previous和divs的点击次数：

$("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完全相反的内容。

jQuery存储和引用项目数组

3 个答案: