旋轉木馬使用jQuery '索引' 功能

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％）。當你點擊列表中的一個項目時，它會通過'value'屬性進行混洗。例如，點擊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