如何在jQuery中找到錨定元素的當前位置？

Question

爲了更好地解釋這一點，我有一個測試網站，你可以看到我的問題：http://andraecruz.com/_dev/1/index.html

在這裏，我有2個頁面創建。導航是以錨鏈接標籤的形式設置的，所以當我點擊第1項時，它會跳轉到第＃頁的#itemOne。這是工作正常，因爲它在每張幻燈片上找到正確的ID。但是當你點擊導航上的另一個項目時，正確的順序就會混亂起來。然而，當你直接去http://andraecruz.com/_dev/1/main.html，導航似乎工作得很好。

我是新來的jQuery，這可能不是這個最好的代碼解決方案。任何人都可以幫我解決這個問題嗎？謝謝。

要查看我的HTML標記，請點擊上面的鏈接，然後查看頁面上的源代碼以查看我的代碼（index.html和main.html）。

由於我在定位標記中導航，因此它看起來與我的幻燈片中的第二頁上的相匹配的ID。而當你再次點擊導航時，它根本不會工作。由於點擊來自第一頁，因此jQuery不知道它在任何匹配的ID上滑動。

這裏是我下面的js代碼： $（函數（）{

$('.item1').click(function(){ 
    $('#itemOne').animate({left:'0'}); 
    $('#itemTwo').animate({left:'1000px'}); 
    $('#itemThree').animate({left:'2000px'}); 
    $('#itemFour').animate({left:'3000px'}); 
}) 
$('.item2').click(function(){ 
    $('#itemOne').animate({left:'-1000px'}); 
    $('#itemTwo').animate({left:'0'}); 
    $('#itemThree').animate({left:'1000px'}); 
    $('#itemFour').animate({left:'2000px'}); 
}) 
$('.item3').click(function(){ 
    $('#itemOne').animate({left:'-2000px'}); 
    $('#itemTwo').animate({left:'-1000px'}); 
    $('#itemThree').animate({left:'0'}); 
    $('#itemFour').animate({left:'1000px'}); 
}) 
$('.item4').click(function(){ 
    $('#itemOne').animate({left:'-3000px'}); 
    $('#itemTwo').animate({left:'-2000px'}); 
    $('#itemThree').animate({left:'-1000px'}); 
    $('#itemFour').animate({left:'0'}); 
}) 

}）;

Answer 1

我不確定我是否可以按照您描述的方式重現您的問題，但我會在這裏建議一個解決方案，以解決您的問題。首先，將所有幻燈片放在同一班級（例如class="slide"）。對所有鏈接執行相同操作（例如class="item-link"）。現在，爲您的每個鏈接指定一個data-item，其值爲「One」，「Two」，「Three」和「Four」（例如鏈接「Item 1」的data-item="One"）。

現在，我們的想法是隻對與點擊鏈接相對應的幻燈片進行動畫製作，並隱藏所有其他的幻燈片。所以，你的jQuery代碼會是這樣的（不能從我這裏測試，但儘管任何語法錯誤應工作）：

$('.item-link').click(function(){ 
    var itemValue = $(this).data('item'); 
    $('.slide').hide(); 
    $('#item'+itemValue).animate({right:'1000px'}); 
}) 

這可能會導致某些不期望的效果，如「擦除」當前幻燈片例如，在滑動新滑塊並向右滑動之前。如果您可以爲我提供JS頁面的完整代碼，我相信我可以幫助您進行必要的調整。

編輯

OK，做出一些改變我原來的答覆got your fiddle working因爲我認爲你的預期。希望能幫助到你。 :)