id搜索仅适用于第一个元素 [英] id search works only for first element

问题描述

我有一个区块：

<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>

[...一些代码....]

[... some code ....]

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

If I do console.log(id) ... it shows the ID nicely... but it works only with first element. I know I am missing something trivial. Any thoughts?

推荐答案

我很确定一切都能正常使用你的jQuery，但只能动画不透明度并没有神奇地将显示样式从无更改为块或者元素的值是什么。我很确定你为 .content 设置一个样式，让 display：none; 。当您为不透明度设置动画时，对于div，它们的显示保持为无，但第一个除外，因为默认情况下，它被块覆盖。你有什么理由动画不透明度而不使用像 fadeIn（）和这样的东西fadeOut ？

I'm pretty sure everything's working correctly with your jQuery, but animating just the opacity doesn't magically change the display style from none to block or whatever the element's value is. I'm pretty sure you set a style for .content to have display: none;. When you animate the opacity, for the divs, their display stays as none, except the first one, because by default, it's overridden with block. Is there any reason you're animating opacity and not using something like fadeIn() and fadeOut?

此外，由于您在<$中存储 id c $ c> href ，没有必要做像 $（id，local_responses） ......只需使用 $（ID）。看看这个：

Also, since you're storing an id in the href, there's no need to do something like $(id, local_responses)...just use $(id). Take a look at this:

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);
});

请注意，我在 >绑定因为这样，它不会为找到的每个< a> 创建一个事件处理程序 - 它为 local_links <中的每个项创建一个/ code>，但仅对选择器执行a。

And just to note, I changed the on binding because this way, it doesn't create an event handler for every <a> found - it creates one for each item in local_links, but is only executed for the selector "a".

这篇关于id搜索仅适用于第一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！