ID搜索只適用於第一個元素

Question

我有一個塊：

<div class="col-1-4 local_links"> 
<table> 
      <tr> 
       <td> 
        <a href="#user_profile">User Profile</a><div class="arrow-selected"></div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <a href="#dashboard">Dashboard</a>     </td> 
      </tr> 
      <tr> 
       <td> 
        <a href="#change_password">Change Password</a> 
       </td> 
      </tr> 
     </table> 
</div> 

[...一些代碼...]

<div class="col-3-4 local_responses"> 
    <div class="content full" id="user_profile" style="display: block;"> 
    <h2>settings :: User Profile</h2> 
    </div> 
    <div class="content full" id="dashboard"> 
    <h2>settings :: Dashboard</h2> 
    </div> 
    <div class="content full" id="change_password"> 
    <h2>settings :: Change Password</h2> 
    </div> 
</div> 

有的JS其中如下：

var local_links = $(".local_links"); 
var local_responses = $(".local_responses"); 

$(("a"),local_links).on("click", function(e){ 
    e.preventDefault(); 
    var id = $(this).attr("href"); 
    local_links.find("div.arrow-selected").remove(); 
    $(this).parent().append('<div class="arrow-selected"></div>'); 
    $(".content", local_responses).animate({opacity: 0}); 
    $(id, local_responses).animate({opacity: 1}); 
}); 

如果我做了console.log（id）...它很好地顯示了ID ......但它只適用於第一個元素。我知道我錯過了一些微不足道的東西。有什麼想法嗎？

Answer 1

我敢肯定，一切都與你的jQuery的正常工作，但是動畫只是opacity不會奇蹟般地在display改變風格從none到block或任何元素的值。我很確定你爲.content設置了display: none;的樣式。在爲不透明度設置動畫效果時，對於div，其display保持爲none（第一個除外），因爲默認情況下它會被block覆蓋。是否有任何理由你動畫opacity而不是使用類似fadeIn()和fadeOut？

此外，由於您在href中存儲了id，因此不需要執行類似$(id, local_responses) ...只需使用$(id)即可。看看這個：

http://jsfiddle.net/SgwyM/

var local_links = $(".local_links"); 
var local_responses = $(".local_responses"); 

$(local_links).on("click", "a", function(e){ 
    e.preventDefault(); 
    var id = $(this).attr("href"); 
    local_links.find("div.arrow-selected").remove(); 
    $(this).parent().append('<div class="arrow-selected"></div>'); 
    $(".content", local_responses).fadeOut(400); 
    $(id).delay(400).fadeIn(400); 
}); 

而只是要注意，我改變了on結合，因爲這樣一來，就不會爲每個<a>發現的事件處理程序 - 它創建一個每個項目在local_links中，但僅對選擇器"a"執行。

Answer 2

我不確定你要找的是什麼行爲，但是你的代碼不會改變爲http://jsfiddle.net/CrossEye/hApgg/，我似乎可以在所有這三個鏈接中始終如一地工作。

我不知道爲什麼你寫的括號包裹之下"a"：

$(("a"),local_links).on("click", function(e){ //... 

這將發揮同樣的

$("a", local_links).on("click", function(e){ // ... 

但他們也不傷害任何東西。

那麼這個小提琴重複你的問題？如果沒有，那麼問題出現在您發佈的代碼之外的代碼中。