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 供你玩。

---

实现点击

这是一段代码，用于实现单击“项目”时的滚动。

在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);
    }

}

我也更新了小提琴。

---

关于您的代码的几点说明

• 您的代码中实际上有两个 ready 处理程序。顶部有一个明确的$(document).ready() 和$(function() {...})。他们实际上都在 ready 事件中工作，所以你应该只保留一个。它适用于两个，但它使您的代码更难管理。

• 总是这样做：首先用var 声明你的变量，然后是你的本地函数，然后做你必须做的事情。尽可能尊重此画布将帮助您阅读代码，因为您希望事物在那里或那里。

• 为您的 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));

Answer 2

1. 使用 ID 而不是类时的时间收益对于非循环使用来说太小了，不值得为所有 div 克隆添加增量而混淆自己。
2. 要知道按下了哪个键，您可以使用 keydown/keyup - http://jsfiddle.net/RsFpJ/4/ - 尝试在字段中输入任何内容，您将看到哪个代码按钮具有
3. 尝试使用 jsfiddle.net 来分享您的代码示例 - 在这种情况下提供帮助会容易得多，因为我们不必重新输入您的代码。
4. 您可以使用 jquery 的 index() 函数 http://jsfiddle.net/RsFpJ/5/、原生 javascript 的长度和 for 为 div 元素构建数字

jQuery

    var objs = $(".key");
    var navHtml = '';
    for (i = 0; i < objs.length; i++) {
        navHtml += '<span>'+(i+1)+'</span>' ;
    }

    $('#nav').html(navHtml);

    $('#nav span').click(function(){
        // index of span inside set of spans, starting from 0;
        var eqIndex = $('#nav span').index(this);
        objs.eq(eqIndex).css("border-color","red");        
    });

HTML：

<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>

<div id="nav"></div>