Question

我是初学者，不记得jquery中的所有脚本。

我想做的是让我的hide / show div有更简单的脚本。不喜欢我的剧本：

<div id="aaa">
<div id="bbb">
<div id="ccc">

<button id="bt1">
<button id="bt2">
<button id="bt3">

$("#bt1").click(function){
    $("#aaa").show();
    $("#bbb").hide();
    $("#ccc").hide();
    });

and so on...

感谢

Answer 1

它没有比你拥有的更简单。

您可以将两个.hide调用合并为一个，但就是这样：

$("#bbb,#ccc").hide();

Answer 2

我不知道实际需要什么，但试试这个

<button id="bt1">
<div id="aaa">
<button id="bt2">
<div id="bbb">
<button id="bt3">
<div id="ccc">




$("#bt1,#bt2,#bt3").click(function(){
    $("#aaa,#bbb,#ccc").hide();
    $(this).next().show();
});

Answer 3

function hideAll(){
   $("#bbb,#ccc,#aaa").hide();
}

$("#bt1").click(function){
//hide 
   hideAll();
//show 
$("#aaa").show();
});

即如果你想显示和隐藏元素。

Answer 4

好吧，您可以使用div属性准备data-个，以便更轻松。例如：

<div id="aaa" data-btn="bt1">Content #1</div>
<div id="bbb" data-btn="bt2">Content #2</div>
<div id="ccc" data-btn="bt3">Content #3</div>

<button class="content-btn" id="bt1">Show #1</button>
<button class="content-btn" id="bt2">Show #2</button>
<button class="content-btn" id="bt3">Show #3</button>

现在请关注我的评论：

$('button.content-btn').click(function() {
    // [data-btn^=...] mean "attr data-btn start with..."
    // First hide all contents
    var contents = $('div[data-btn^=bt]');
    contents.hide();

    // Now store the button id clicked
    var show = $(this).attr('id');

    // Now find and show the content that combine with the button id
    var content = $('div[data-btn=' + show + ']');
    content.show();
});

您可以在JSFiddle找到一个实时示例。

Answer 5

使用更多HTML属性，您可以像这样制作单击功能：

<div class="someclass" id="aaa"></div>
<div class="someclass" id="bbb"></div>
<div class="someclass" id="ccc"></div>

<button id="bt1" rel="aaa">show only aaa</button>
<button id="bt2" rel="bbb">show only bbb</button>
<button id="bt3" rel="ccc">show only ccc</button>

JavaScript的：

$('button').click(function(){
    $('.someclass').hide();
    $('#' + $(this).attr('rel')).show();
});

（注意：修复了语法错误！）

您还可以使用HTML 5 data-属性和jQuery.data来阅读它们，而不是rel。

在jquery中为隐藏/显示使用按钮创建一个简单的脚本

5 个答案: