0

我有一个块：

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

4

2 回答 2

1

我很确定一切都可以与您的 jQuery 一起正常工作，但是仅动画opacity并不会神奇地将display样式从nonetoblock或任何元素的值更改。我很确定您为.contentto have设置了样式display: none;。当您为不透明度设置动画时，对于 div，它们display保持为none，除了第一个，因为默认情况下，它被覆盖block。您是否有任何理由制作动画opacity而不使用fadeIn()and之类的东西fadeOut？

此外，由于您将 an 存储id在 中href，因此无需执行诸如$(id, local_responses)...just use之类的操作$(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"。

于 2012-11-27T14:39:13.120 回答
0

我不确定您到底在寻找什么行为，但是将您的代码原封不动地发布到http://jsfiddle.net/CrossEye/hApgg/，我似乎让它在所有三个链接上都能正常工作。

我不知道你为什么写括号来包装"a"下面的内容：

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

这同样适用：

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

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

那么这个小提琴会重复你的问题吗？如果不是，那么问题出在您发布的代码以外的代码中。

于 2012-11-27T14:59:16.640 回答