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之类的内容？

此外，由于您在id中存储href，因此无需执行$(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){ // ...

但他们也没有伤害任何东西。

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

id搜索仅适用于第一个元素

2 个答案: