jquery：将滑动列表添加到滑动div

Question

你好 - 首先，我相当新的jQuery，所以你的扩展的专业知识非常感谢。

DEMO：http://www.transcendspace.com/beta/

我想生成用于我的div一个导航：1 | 2 | 3 | 4 | 5等，其将突出的数目取决于哪个格是有效的。理想情况下，突出显示将与左/右箭头结合使用。

CODE：`

$(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的ID在属性data-itemid，毕竟我们做我们想做:-)

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. 您可以构建号码的DIV jQuery的index（）函数http://jsfiddle.net/RsFpJ/5/，本地JavaScript的长度和

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>