1

好的，所以我正在慢慢学习 jquery，需要一些帮助，我环顾四周，尝试了一些没有运气的事情。无论如何，我有一个像这样的 html dom 结构：

<div id='foo'>
   <div class='1'>
       <div class='a'></div><div class='b'> </div
   </div>
   <div class='2'>
       <div class='a'></div><div class='b'> </div>
   </div>
   <div class='3'>
       <div class='a'></div><div class='b'> </div>
   </div>
</div>

我想要完成的是，当我单击（全部 1、2、3 个）按钮之一时，我的 jquery 显示只是内部的相应类，foo或者在所有类的情况下。示例：我单击按钮1dom 看起来像这样

<div id='foo'>
   <div class='1'>
       <div class='a'></div><div class='b'> 
   </div>
</div>

现在我尝试使用以下命令执行此操作，我从解决方案到其他类似的帖子中找到了，但没有运气：（我的所有案例都有效，但没有一个案例）

 $("#foo").find(".1").fadeOut();
 $("#foo  .1").fadeOut();
 $("#foo > .1").fadeOut();
 $("#foo,  .1").fadeOut(); // this just fades out all of foo

那么我该如何正确地做到这一点？以便我得到我想要的结果，还是我在某个地方错过了一个主要概念，这是不可能的？

编辑注意事项：我已编辑以正确关闭 div ...这是我不小心做的事情，因为示例从整个代码中简化了很多

4

4 回答 4

2

我会给btn你的按钮一些类（比如）来表示元素组：

<div id='foo'>
   <div class='btn 1'>
       <div class='a'></div><div class='b'></div>
   </div>
   <div class='btn 2'>
       <div class='a'></div><div class='b'></div>
   </div>
   <div class='btn 3'>
       <div class='a'></div><div class='b'></div>
   </div>
</div>

然后你可以写：

 $(document).ready(function(){
    $('#foo .a').hide();

    var $btn = $('#foo > .btn');
    $('#foo').on('click', '.btn', function() {
        $btn.find('.a').fadeOut();
        $(this).find('.a').fadeIn();
    });
});

http://jsfiddle.net/TUnB2/

我的 jquery 节目只是里面的相应类

关键思想是使用选择器的上下文来缩小选定元素的数量：

$(this).find('.a')
于 2013-05-06T09:50:20.187 回答
1

标记中有几个未闭合的 div 标签，这将影响淡入淡出。

<div id='foo'>
   <div class='1'>
       <div class='a'></div><div class='b'></div> <!-- missing div -->
   </div>
   <div class='2'>
       <div class='a'></div><div class='b'></div> <!-- missing div --> 
   </div>
   <div class='3'>
       <div class='a'></div><div class='b'> </div> <!-- missing div -->
   </div>
</div>

修复标记后，我们可以添加按钮：

HTML

<div id='foo'>
   <div class='1'>
       <div class='a'>a1</div><div class='b'>b1</div>
   </div>
   <div class='2'>
       <div class='a'>a2</div><div class='b'>b2</div>
   </div>
   <div class='3'>
       <div class='a'>a3</div><div class='b'>b3</div>
   </div>
</div>
<button class="toggle">Show 1</button>
<button class="toggle">Show 2</button>
<button class="toggle">Show 3</button>

然后是切换它们的脚本

Javascript

$("button.toggle").click(function(){
    $("#foo>div:not('." + $(this).index()+"')").fadeOut();
});

/* 请注意，这依赖于按顺序放置的按钮 */

工作示例 http://jsfiddle.net/5vzCe/1/

于 2013-05-06T09:43:45.550 回答
1

好吧，虽然我不确定你将如何在第一次点击后实际切换可见性......

$('.a').click(function(){
    $('#foo > div').not($(this).parent()).remove();
});

Also.fix</div>在你打开你的<div class='b'>元素后这些结束标签。

于 2013-05-06T09:45:56.980 回答
1

看来您的 b 类 div 没有被关闭。尝试关闭它们，看看是否有任何结果。

这是结束标签：

<div id='foo'>
   <div class='1'>
       <div class='a'></div><div class='b'></div>
   </div>
   <div class='2'>
       <div class='a'></div><div class='b'></div>
   </div>
   <div class='3'>
       <div class='a'></div><div class='b'></div>
   </div>
</div>

此外，您需要告诉 jquery 监听您的这些按钮的点击。

这是一个示例 jquery 点击事件来尝试：

$("#foo .1").click(function () {
     $("div", this).fadeIn();
});

此代码段将查找 foo 1 内的所有 div，并使它们淡入。

让我知道这对你有用，我还没有测试过。

-桂

于 2013-05-06T09:53:09.477 回答