Question

我正在尝试根据点击的.fadeIn() <div>来构建一组链接。{1}} .fadeOut()我想<div>任何<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>与所点击的当前链接不一致的$("#link1").click(function() { $(".all").fadeOut(); //clear any divs that may be visible now $(".part1").fadeIn(); // display div coinciding with link });。我希望也可以通过链接显示全部/隐藏所有内容。

例如：

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

因此，单击链接1将显示第1部分，依此类推，依此类推。现在我似乎无法绕过这个，因为最初我的想法是为点击的每个链接都有一个函数，如下所示：

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

然后对于show来说，只需要：

.all:visible

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

相反，我的想法是为每个读取

的链接编写一个函数

{{1}}

但我可以拥有超过25个链接，我已经知道必须有一个更有效的方法来做到这一点。是否有可能有一个过滤器，可能是{{1}}来判断哪些是可见的，哪些是不可见的，然后让那些淡出？

Answer 1

对于第一部分，单击link1应隐藏所有div，但应隐藏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的所有锚，绑定一个事件处理程序。

在该事件处理程序中，determine the "index"所点击的链接，在没有showall ID的所有链接的上下文中。

淡出div div.all下div下的每个showAll。

淡出完成后，使用与我们点击的链接对应的索引淡入div。

对于div.all id的锚点，在{{1}}

下的每个{{1}}处创建一个淡入淡出的事件处理程序

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和类。

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

4 个答案: