jquery:将导航列表添加到滑动 div

Question

您好——首先，我是 jquery 的新手，非常感谢您丰富的专业知识。

演示:http://www.transcendspace.com/beta/

我想为我的 div 生成一个导航:1|2|3|4|5 等，它会根据激活的 div 突出显示数字。理想情况下，突出显示可以与我的左/右箭头结合使用。

代码:`

$(document).ready(function() {
  $(window).resize(function () {
      resizePanel();
  });
});

function resizePanel() {

    width = $(window).width();
    height = $(window).height();

    mask_width = width * $('.item').length;

    $('#debug').html(width  + ' ' + height + ' ' + mask_width);
    $('#wrapper, .item').css({width: width, height: height});
    $('#mask').css({width: mask_width, height: height});
    $('#wrapper').scrollTo($('a.selected').attr('href'), 0);    
}


function scrollToPosition(element) {
   if (element !== undefined) {
        $("#wrapper").scrollTo(element, 800, {});
   }
}



$(function() {
     //Create an Array of posts
     var posts = $('.item');
     var position = 0; //Start Position
     var next = $('#next');
     var prev = $('#prev').hide();

 //Better performance to use Id selectors than class selectors
     next.click(function(evt) {
     //Scroll to next position
         prev.show();
         scrollToPosition(posts[position += 1]);

         if (position === posts.length - 1) {
             next.hide();
         }
});

prev.click(function(evt) {
    //Scroll to prev position    
    next.show();
scrollToPosition(posts[position -= 1]);

    if (position === 0) {
    prev.hide();
    }
});

}); 

 </script>'

Answer 1

在您的 .ready() 处理程序中，创建一个项目列表:

var len = posts.length
var $ul = $('<ul id="navItems">');
for (var i=0; i<len; i++) {
    $('<li data-item="' + i+ '">' + (i+1) + '</li>')
        .click(function(e) {
            // go to this item when  you click
            // get the item num using $(this).data('item');
        })
        .appendTo($ul);
}
$ul.insertAfter($('#prev'));

您可以使用 css 设置列表样式以使其水平显示:

#navItems { list-style: none; display: inline-block; }
   #navItems li { display: inline-block; width: 15px; height: 15px; }
   #navItems li { zoom: 1;  } // for old IE

这是一个 fiddle给你玩。

---

实现点击

下面是一段实现点击“item”时滚动的代码。

在属性data-itemid中保存对应.item的ID应该会容易一些，毕竟我们做了我们想做的:-)

for (var i=0; i<len; i++) {

    // save the item id and not just the index
    $('<li data-itemid="' + posts[i].id + '">' + (i+1) + '</li>')
        .click(function(e) {

            // get the data from data-itemid attibute
            var itemid = $(this).data('itemid');

            // use your scrollToPosition method
            // with our 'itemid' we can get the element using the ID selector
            scrollToPosition($('#' + itemid));

        })
        .appendTo($ul);
    }

}

我也更新了 fiddle 。

---

关于您的代码的几点说明

• 您的代码中实际上有两个 ready 处理程序。一个显式在顶部 $(document).ready() 和 $(function() {...})。它们实际上都在处理 ready 事件，因此您应该只保留一个。它适用于两个，但会使您的代码更难管理。

• 始终这样做:首先使用 var 声明您的变量，然后声明您的本地函数，然后执行您必须执行的操作。尽可能多地尊重这个 Canvas 将有助于您阅读代码，因为您希望东西在那里或那里。

• 在您的 jquery 变量前加上 $:var $posts = $('.item');。当您随后看到一个变量时，您可以通过名称知道它包含(或应该包含)什么。

• jQuery 是关于链接的。
  

而不是这样做:

var next = $('#next');
next.click(function(e) {...});

这样做:

var $next = $('#next').click(...).addClass(...).show();
var $prev = $('#prev').click(...).toggle((position > 0));