Question

我正在使用jQuery在点击事件中显示/隐藏内容，如下所示：

$('#staffer1').click(function() {
    $("#staff1").show();
    $("#staff2").hide();
    $("#staff3").hide();
});     

$('#staffer2').click(function() {
    $("#staff2").show();
    $("#staff1").hide();
    $("#staff3").hide();
}); 

$('#staffer3').click(function() {
    $("#staff3").show();
    $("#staff1").hide();
    $("#staff2").hide();    
});

这个问题在于数量。如果我们有60名员工，是否有办法规避每次点击事件列出60行？

HTML就像这样：

<div>
<p><a id="staffer1">Staff Name 1</a></p>
<p><a id="staffer2">Staff Name 2</a></p>
<p><a id="staffer3">Staff Name 3</a></p>
</div>

<div id="staff1">
<div class="slider">
<img src="image.jpg">
</div>
<div class="staff_bio">
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugi.</p>
</div>
</div>  

<div id="staff2">
<div class="slider">
<img src="image.jpg">
</div>
<div class="staff_bio">
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugi.</p>
</div>
</div>

Answer 1

为每个staff元素添加一个名为staff的类，然后使用它来隐藏所有其他元素：

$('#staffer1').click(function() {
    $(".staff").hide();
    $("#staff1").show();
});

更好的是，有一个staffer类，然后你就可以拥有一个处理程序：

$('.staffer').click(function() {
    $(".staff").hide();
    var num = $(this).attr(id).replace(/staffer/, '');
    $("#staff"+num).show();
});

我不知道你的html是什么样的，但是还有其他方法可以做到这一点，例如使用data-和.data()来存储/检索员工编号：

http://jsfiddle.net/hcvWQ/

使用.index()找出点击的.staffer：

http://jsfiddle.net/zmXqx/

或者，只需使用html结构将链接/按钮与信息相关联，如下例所示：

http://jsfiddle.net/kde9J/

Answer 2

我完全同意Jeff B.你应该为每个HTML元素添加一个类，你应该使用jQuery将函数附加到元素。

我强烈推荐http://jqueryui.com/，而不是发明自己的用户界面和互动。

这是您最近的HTML编辑中的功能小提琴。
http://jsfiddle.net/krets/VgrTE/

只需按照Jeff B的建议添加课程。

<p><a id="staffer1" class="staffer">Staff Name 1</a></p>
...
<div id="staff1" class="staff">
...

$(function() {
    $('.staffer').each(function(i){
        $(this).click(function(){
            $('.staff').hide()
            var num = $(this).attr("id").replace(/staffer/, '');
            $("#staff"+num).show()
        });
    });
});

隐藏/显示包含许多变量的内容

2 个答案: