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){ // ... 

但他们也不伤害任何东西。

那么这个小提琴重复你的问题？如果没有，那么问题出现在您发布的代码之外的代码中。