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) ...它很好地显示了身份。但它只适用于第一个元素。我知道我错过了一些微不足道的东西。有什么想法吗？

Answer 1

我很确定你的jQuery一切都能正常工作，但是仅仅让opacity动画并不能神奇地将display样式从none更改为block或任何元素的值。我很确定你为.content设置了一个拥有display: none;的样式。当你动画的不透明度，对于div，他们的display保持为none，除了第一个，因为在默认情况下，它被block覆盖。有没有什么原因让你不使用像fadeIn()和fadeOut这样的东西来制作opacity动画呢

此外，由于您将id存储在href中，因此不需要使用$(id)执行类似$(id, local_responses)...just的操作。看看这个：

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

但它们也不会伤害任何东西。

那么这个小提琴复制了你的问题吗？如果没有，那么问题出在代码中，而不是您发布的代码中。