Question

我有一个ul导航，其中包含一些li元素。

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

虽然我获得了相同数量的div元素，但我可以使用.scrollTo( "number of div" )作为目标，从0开始。我可以这样做：

$("ul li:nth-child(1)").on('click', function(){
   sliderInstance.goTo(0);
});
$("ul li:nth-child(2)").on('click', function(){
   sliderInstance.goTo(1);
});
$("ul li:nth-child(3)").on('click', function(){
   sliderInstance.goTo(2);
});
$("ul li:nth-child(4)").on('click', function(){
   sliderInstance.goTo(3);
});

但这似乎既不聪明也不高效。 Imagen我有大约20个div和li个元素。是否有一个很好的调整结合.size()，.length()或其他我不知道的东西？

Answer 1

只是为了多元化：

var $li = $('ul li').on('click', function (event) { 
    sliderInstance.goTo($li.index(this));
})

Answer 2

我会使用onclick事件

<ul id="navigation">
 <li onclick="scrollTo('#yourTargetAnchor1')"></li>
 <li onclick="scrollTo('#yourTargetAnchor2')"></li>
 <li onclick="scrollTo('#yourTargetAnchor3')"></li>
 <li onclick="scrollTo('#yourTargetAnchor4')"></li>
</ul>

你也可以生成它，但在大多数情况下，硬编码导航也不错。生成它我会这样做：

var navArr = $('#navigation').children().length;
for (var i = 0; i < navArr; i++) {
  $('#navigation').children()[i].click(function(){
    scrollTo('#yourTargerAnchor'+i);}}

未经测试但应该完成这项工作。希望我能帮忙;）

获取li的数量并将其分配给函数

2 个答案: