Question

JavaScript：

$("nav ul li").click(function (){
    var index = $(this).attr('value');
    $("#pages").css('left', index + '%');
});

HTML：

<nav>
    <ul>
        <li id="about" class="selected inSelected" value="50">About</li>
        <li id="contact" value="-50">Contact</li>
        <li id="test" value="-150">YouTube</li>
    </ul>
</nav>

上面的代码完成了我需要它做的事情。想象一下页面中间的一个div（左边50％）。当您单击列表中的某个项目时，它会按“值”属性对其进行随机播放。例如，点击YouTube会将左侧设置为-150％，基本上将div移动到其他内容。

我的问题是它不是很有效但我的非数学大脑并没有帮助我提出一个明智的解决方案。我希望实现相同的目标，但无需为每个li设置特定值。这应该超过可能使用'index（）'。

$("nav ul li").click(function (){
    var index = $(this).index(); // this is the main difference
});

假设您点击YouTube，索引将等于2.所以现在我需要从2到-150。很好，这是可能的，但我需要使用完全相同的公式来回到与索引1联系。

如果有人能提供帮助，我会非常感激。

Answer 1

尝试

$("nav ul li").click(function (){
    var index = $(this).index(); // this is the main difference
    var value = index * -100 + 50
});

喜欢

index calc            value
0 =   0 * -100 + 50 = 50
1 =   1 * -100 + 50 = -50
2 =   2 * -100 + 50 = -150
3 =   3 * -100 + 50 = -250

演示：Fiddle

使用jQuery'索引'功能的轮播

1 个答案: