0

我正在使用 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>
4

2 回答 2

4

为每个人员元素添加一个名为的类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/

于 2013-04-08T20:45:36.217 回答
0

我完全同意 Jeff B 的观点。您应该为每个 HTML 元素添加一个类，并且应该使用 jQuery 将函数附加到元素上。

我强烈推荐http://jqueryui.com/而不是发明自己的 UI 和交互。

这是您最近的 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()
        });
    });
});
于 2013-04-08T21:08:23.000 回答