如何使用jQuery .index（）返回不同的結果，具體取決於哪個<a>已被點擊

Question

我一直在尋找這個網站和整個谷歌試圖排除這一點，沒有任何運氣。此外，我是jQuery的新手，所以這可能是初級的，但這裏去....我有一個無序列表，八行元素，所有鏈接。點擊時，每個鏈接都應該在Lightbox中打開不同的文章，具體取決於點擊了哪個鏈接。我寫的代碼在Lightbox中打開文章，但會始終打開要點擊的第一個鏈接的第一篇文章。然後，如果它關閉並點擊不同的鏈接，它會打開第一個鏈接的文章。我確定我需要使用.index（）來知道鏈接被點擊了，但不知道如何去做。誰能幫我這個？這裏是我的代碼的一部分看起來像....

 <ul> 
      <li><a href="#" id="a" class="links">Month One</a></li> 
      <article>Here is a long article that opens in lightbox</article> 

      <li><a href="#" id="b" class="links">Month Two</a></li> 
      <article>Here is a long article that opens in lightbox</article> 

    </ul> 

    <script> 
$('a').on('click', function (e) { 
switch (e.target) { 
    case "#a": 
     $overlay.append($articelNameA); 
     $articleNameA.show(); 
     break; 
    case "#b": 
    $overlay.append($articleNameB); 
    $articleNameB.show(); 
     break; 

} 

}）;

//adds overlay to html body 
$("body").append($overlay); 

//capture click event on empty link 
$("#a").click(function(event){ 
    event.preventDefault(); 
    var contentText = $('#aarticle').html();     

    $articleNameA.html(contentText); 
    //opens the overlay on click 
    $overlay.show(); 
}); 

$("#b").click(function(event){ 
    event.preventDefault(); 
    var contentText = $('#barticle').html();     

    $articleNameB.html(contentText); 
    //opens the overlay on click 
    $overlay.show(); 
    }); 


//Exit overlay on click 
$overlay.click(function(){ 
    $overlay.hide(); 
}); 
}); 
    </script> 

希望有道理！

Answer 1

你需要找出它的關閉力的指數，這將給指數 您的JS：

$('a').on('click',function(){ 
    alert($(this).closest('li').index('ul > li')); 
}); 

DEMO

Answer 2

**我可以給你解決這兩種方式... **

A.使用事件目標前：

 $('a').on('click',function(e){ 
    switch(e.target){ 
    case xvalue: 
    //do this 
    break; 
    case yvalue: 
    //do thatbrea; 
    } 
    /* and so on...*/ 
    }); 

B.傳遞數據源作爲內容......例如：

<script> 
$('a').on('click',function(e){ 
var html = "<div>His name is:" + $(this).data("source") + "</div>" 
$('body').append(html);// Appends the element to the body 
}); 
</script> 

您可以檢查這裏的第二個例子：http://jsfiddle.net/leojavier/084hq8m8/

Answer 3

這裏我整理出了問題不使用的.index但所有相同的加工。我認爲必須有更有效的方法否？

<ul class="links"> 
     <li><a href="#" id="a">Month One</a></li> 
     <article>Here is a long article that opens in lightbox</article> 

     <li><a href="#" id="b">Month Two</a></li> 
     <article>Here is a long article that opens in lightbox</article> 

</ul> 

<script> 
    var linkA = $('#a'); 
    var linkB = $('#b'); 

    $('.links a').click(function(){ 
    if($(this).is("#a")){ 
     $overlay.append($linkA); 
     $linkA.show(); 
    } else if($(this).is("#b")) { 
    $overlay.append($linkB); 
    $linkB.show(); 
    } 
}); 

$("body").append($overlay); 

$('.links a').click(function(e) { 
     e.preventDefault; 

      if($(this).is("#a")){ 
      var contentTextA = $('#aarticle').html(); 

      $linkA.html(contentTextA); 
      //opens the overlay on click 
      $overlay.show(); 

     } else if($(this).is("#b")) { 
      var contentTextB = $('#barticle').html();     
      $linkB.html(contentTextB); 
       //opens the overlay on click 
       $overlay.show(); 
     } 
}); 

$overlay.click(function(){ 
    location.reload(); 
    }); 
}); 
</script> 

兩個問題我仍然有代碼的第一個.....我覺得必須有比這麼多else if語句的真正的代碼有8個鏈接，以便它一噸更effecient方法重複。第二，在燈箱退出的唯一方法，我可以得到重置和打開一篇新文章的鏈接是做location.reload，這種方式每當一個燈箱關閉和一個新的鏈接點擊正確的文章加載到燈箱，但導致鏈接無序列表稱爲鏈接回到其隱藏狀態，用戶必須重新打開無序列表稱爲鏈接導致給用戶帶來一些不便。