通过JQuery基于可见性切换多个div类

Question

我试图构建一组链接，将.fadeIn() <div> s基于哪些被点击。我想.fadeOut()任何<div> s，不符合当前被点击的链接。我希望它也有可能显示所有/隐藏所有与链接以及。

例如:

<a href="#" id="showall">Show All</a>
<a href="#" id="link1">Link 1</a>
<a href="#" id="link2">Link 2</a>
<a href="#" id="link3">Link 3</a>
<a href="#" id="link4">Link 4</a>

<div class="all">
   <div class="part1">SOME TEXT</div>
   <div class="part2">SOME TEXT</div>
   <div class="part3">SOME TEXT</div>
   <div class="part4">SOME TEXT</div>
</div>

点击链接1会显示第1部分，以此类推。现在我似乎无法理解这一点，因为最初我的想法是为每个点击的链接提供一个函数，读起来像:

 $("#link1").click(function() {
   $(".all").fadeOut();  //clear any divs that may be visible now
   $(".part1").fadeIn();  // display div coinciding with link   
 });

然后for show all simply have:

 $("#showall").click(function() {
   $(this).toggle("slow");
 });

但是，当然，我了解到通过改变容器的可见性，容器中的所有元素也将呈现为不可见，无论函数中是否有两个命令(我认为)

因此，我的想法是为每个链接写一个函数，读取

 $("#link1").click(function() {
   $(".part2, .part3, .part4").fadeOut();  //clear other divs
   $(".part1").fadeIn();  // display div coinciding with link   
 });

但是我可以有25个以上的链接，我已经知道必须有一个更有效的方法来做到这一点。是否有可能有一个过滤器，也许.all:visible告诉哪些是可见的，哪些不是，然后有那些淡出?

Answer 1

对于第一部分，单击link1应该隐藏除class=part1

之外的所有div

$("#link1").click(function() {
    $("div[class^=part]").fadeOut();
    $("div.part1").fadeIn();
});

然后是show all

$("#showall").click(function() {
    $("div[class^=part]").fadeIn();
});

Answer 2

这样如何:

$("a:not(#showall)").on("click", function() {
    var index = $(this).index("a:not(#showall)");
    $("div.all div:visible").fadeOut(function() {
        $("div.all div:eq(" + index + ")").fadeIn();
    });
});
$("#showall").on("click", function () {
    $("div.all div").fadeIn();
});

例子: http://jsfiddle.net/Zh3a9/

这里发生了很多事情，但基本上是这样的:

• 对于所有没有 showall id的锚，绑定一个事件处理程序。

  • 在该事件处理程序中，在没有showall id的所有链接的上下文中，确定被点击的链接的"索引"。
  • 淡出div.all下:visible的div。
  • 淡出完成后，将div与我们点击的链接对应的索引一起淡出。

• 为showAll id的锚创建一个事件处理程序，在div.all下淡出每个div

Answer 3

您可以使用下面的代码获取已单击id的编号，然后确定要显示哪个部分:

$("#myLinks a").click(function() {
    if (this.id == "showall") {
        $(".all div").fadeIn("slow");
    } else {
        var num = this.id.match(/d+$/)[0];
        var target = $(".part" + num);
        $(".all div").not(target).fadeOut("slow");
        target.fadeIn("slow");
    }
})

jsFiddle: http://jsfiddle.net/jfriend00/eVKDu/

稍微修改一下HTML:

<div id="myLinks">
    <a href="#" id="showall">Show All</a>
    <a href="#" id="link1">Link 1</a>
    <a href="#" id="link2">Link 2</a>
    <a href="#" id="link3">Link 3</a>
    <a href="#" id="link4">Link 4</a>
</div>
<div class="all">
   <div class="part1">SOME TEXT1</div>
   <div class="part2">SOME TEXT2</div>
   <div class="part3">SOME TEXT3</div>
   <div class="part4">SOME TEXT4</div>
</div>

或者，这个版本使用被点击链接的位置与要显示的项目的位置相关联:

$("#myLinks a").click(function() {
    if (this.id == "showall") {
        $(".all div").fadeIn("slow");
    } else {
        var all = $(".all div");
        var index = $(this).index();
        var target = all.eq(index - 1);
        all.not(target).fadeOut("slow");
        target.fadeIn("slow");
    }
})

jsFiddle: http://jsfiddle.net/jfriend00/BT2UB/

我个人喜欢第一个版本，因为它不是位置敏感的，所以如果周围有任何其他div，它们不会把事情搞砸，但它确实需要设置id和类与后面的数字匹配。

这是另一个版本，它使用每个元素上的数据来告诉它连接到什么:

<div id="myLinks">
    <a href="#" id="showall">Show All</a>
    <a href="#" id="link1" data-sel=".part1">Link 1</a>
    <a href="#" id="link2" data-sel=".part2">Link 2</a>
    <a href="#" id="link3" data-sel=".part3">Link 3</a>
    <a href="#" id="link4" data-sel=".part4">Link 4</a>
</div>
<div class="all">
   <div class="part1">SOME TEXT1</div>
   <div class="part2">SOME TEXT2</div>
   <div class="part3">SOME TEXT3</div>
   <div class="part4">SOME TEXT4</div>
</div>
$("#myLinks a").click(function() {
    if (this.id == "showall") {
        $(".all div").slideDown("slow");
    } else {
        var target = $(this).data("sel");
        $(".all div:visible").not(target).slideUp("slow");
        $(target).slideDown("slow");
    }
});

Answer 4

我想使用jfriend00的第二个方法，稍作修改。你不必把你的类命名为part1, part2, part3, ...。相反，只需将它们全部命名为"部分"。缓存选择器以提高性能。

<div id="myLinks">
    <a href="#" id="showall">Show All</a>
    <a href="#" id="link1">Link 1</a>
    <a href="#" id="link2">Link 2</a>
    <a href="#" id="link3">Link 3</a>
    <a href="#" id="link4">Link 4</a>
</div>
<div id="all">
   <div class="part">SOME TEXT1</div>
   <div class="part">SOME TEXT2</div>
   <div class="part">SOME TEXT3</div>
   <div class="part">SOME TEXT4</div>
</div>

JS:

var $parts = $('#all .part'),
    $links = $('#myLinks a');
$links.click(function() {
    if (this.id == "showall") {
        $parts.fadeIn("slow");
    } else {
        var index = $links.index(this),
            $target = $parts.eq(index - 1);
        // If part div is not already visible
        if(!$target.is(':visible')) {
            $parts.fadeOut('slow');
            $target.fadeIn('slow');
        }
    }
});    

虽然这个方法是位置敏感的，但它更干净，你不需要有太多的id和类。