如何使这个显示/隐藏更简洁？

Question

有很多显示/隐藏问题和示例，但我找不到答案。

我有一个类似这样的简单代码，用于页面内的几个区域。

jQuery(document).ready(function () {
    jQuery('#mini-cart').hide(); 
    jQuery('#mini-cart-a').click(function ()  { 
        jQuery('#mini-cart').toggle(400);  
        return false; 
    }); 
});

每个显示/隐藏都使用自己的 ID，所以我只是将 ID 分组如下：

jQuery('#show-hide1, #show-hide2').hide();

这种方法的问题是，当我单击显示/隐藏元素时，所有元素都会显示。

所以我尝试了类似的方法，但只有第一个有效，第二个无效，当我点击它时，它什么也不做。

jQuery(document).ready(function () {
    jQuery('show-hide1, #show-hide2').hide();
    jQuery('show-hide1 a, #show-hide2 a').click(function () {
        jQuery(this).next().toogle(400);
    }
    return false;
    });
});

我需要在一个页面中显示/隐藏 4 个不同的区域，并且真的不想重复相同的代码 4 次。谢谢！

更新： （对不起，我不能使用添加评论也不能回答我的问题）

谢谢大家的帮助。

Lee 的版本更像是一个标签——我不希望隐藏的 div 将 ID 关联到锚标记。这是 CMS 环境，所以如果可能的话，我会尽量简化它。

Andy 的版本也有类似的 ID 问题，所以我选择了 roXon 的

罗克森： http://jsbin.com/ihoqi3/2/ 点击查看包（2），你可以看到它正在工作，但是如果你进入问题选项卡，点击“提问”，它会从查看包中打开隐藏的容器。

杰里米 B 的版本： http://jsbin.com/ibayu4 它隐藏了 toggleLink 的文本。

在示例页面中，评论选项卡中的“选择您的茶”和“写评论”需要类似的处理，但如果我可以让上述两个工作，其余的将自行处理:)

现在我使用 4 个单独的代码来使其工作。

p/s，我需要使用 herf 锚，因为这对键盘用户很重要，JS 显示/隐藏隐藏的 div 无法切换。

Answer 1

举了一个小例子来说明如何做到这一点：http://jsfiddle.net/ytx2J/

HTML：

<a href="#" class="toggleLink" data-id="1">1</a> 
<a href="#" class="toggleLink" data-id="2">2</a> 
<a href="#" class="toggleLink" data-id="3">3</a>
<a href="#" class="toggleLink" data-id="4">4</a>

<div id="show-hide1">div 1</div>
<div id="show-hide2">div 2</div>
<div id="show-hide3">div 3</div>
<div id="show-hide4">div 4</div>

JS：

$(function(){
    $('.toggleLink').click(function(ev){
       $('#show-hide'+$(this).data('id')).toggle(400); 
       ev.preventDefault();
    });
});

Answer 2

指定一个类，例如“.tab”，以及包含要为特定“.tab”显示的内容的 div 的 id 即

$(".tab").click(function(){
   var clickedID = $(this).attr("class").split(" ")[1];
   $("#" + clickedID).toggle();
});

<div class="tab container1"></div>
<div id="container1">This container will be displayed if you click on the div .tab container 1</div>

<div class="tab container2"></div>
<div id="container2">This container will be displayed if you click on the div .tab container 2</div>

Answer 3

首先为每个区域分配相同的类别。

jQuery('.hider').click(function() {
    jQuery(this).toggle(400);
    return false;
});

这只会导致您单击的“隐藏器”切换。每个人都将独立工作。

Answer 4

像安迪的，但略有不同，允许不同的 ID 结构

HTML

<a href="#div1" class="toggleLink">1</a> 
<a href="#div2" class="toggleLink">2</a> 
<a href="#div3" class="toggleLink">3</a>
<a href="#div4" class="toggleLink">4</a>

<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
<div id="div4">div 4</div>

JS

$(function(){
    $('.toggleLink').click(function(ev){
       $($(this).attr('href')).toggle(400); 
       ev.preventDefault();
    });
});

JSFiddle 的示例

Answer 5

与 Andy 类似，但略有不同，允许在不必要的情况下删除 ID。
我们可以保持简单对吧？

jsFiddle demo

<a href="#" class="toggleLink">1</a>
<a href="#" class="toggleLink">2</a>
<a href="#" class="toggleLink">3</a>
<a href="#" class="toggleLink">4</a>

<div class="show-hide">div 1</div>
<div class="show-hide">div 2</div>
<div class="show-hide">div 3</div>
<div class="show-hide">div 4</div>

$('.toggleLink').click(function(){
    $('.show-hide:eq('+ $(this).index() +')').toggle(400);
});

将index 锚点指向:eq() 元素是一个很好的组合 --> 都基于“0”。