Question

我有2个点击元素（divs - ＃click1，＃click2）和3个内容元素（表格 - #default，＃table1，＃table2）。

当你点击＃click1时，它会隐藏#default（和＃table2，如果需要），并显示＃table1，＃click2隐藏其他表，并显示＃table2。

如果所有＃table1和＃table2都被隐藏了，我希望#default show，并且它不是那样的。

我能想到的最好的东西不起作用：

$( "#default:hidden" ) && $( "#table1:hidden" ) && $( "#table2:hidden" ) {
    $( "#default" ).show();
});

HTML：

<div class="container">
<div id="click1" class="button">
    Click 1
</div>
<div id="click2" class="button">
    Click 2
</div>
<div class="tables">
    <table id="default">
        <tr><td>Default Info</td><td>Default Info</td></tr>
        <tr><td>Default Info</td><td>Default Info</td></tr>
    </table>
    <table id="table1">
        <tr><td>Info1</td><td>info1</td></tr>
        <tr><td>Info1</td><td>info1</td></tr>
    </table>
    <table id="table2">
        <tr><td>Info2</td><td>info2</td></tr>
        <tr><td>Info2</td><td>info2</td></tr>
    </table>
</div>

的CSS：

.container {
width:80%;
text-align:center;
margin:0 auto;
}
.button {
width:100px;
display:inline-block;
border:2px solid blue;
}
.tables {
width:50%;
margin:0 auto;
}
table {
border:1px solid red;
text-align:center;
width:100%;
}
#table1, #table2 {
display:none;
}

JS：

$( "#click1" ).click(function() {
$( "table2" ).hide("slow", function(){});
$( "#default" ).hide("slow", function(){});
$( "#table1" ).toggle("slow", function(){});
});
$( "#click2" ).click(function() {
$( "#table1" ).hide("slow", function(){});
$( "#default" ).hide("slow", function(){});
$( "#table2" ).toggle("slow", function(){});
});

这是我的小提琴：http://jsfiddle.net/SBNxY/103/

Answer 1

有很多方法可以做到这一点。

看看这个小提琴http://jsfiddle.net/a4u0ujoa/，我认为它可以做你想要的。

我已经创建了一个函数，用于检查当前元素是否可见，并相应地隐藏/显示，或者如果两者都被隐藏，它将显示默认值：

function toggleInfoTable(element)
{
    //see if the element is visible:
    var vis = element.is(":visible")
    //hide all tables first 
    $(".info-table").hide();
    if (vis)
    {
        //it was visible, it's hidden now so show the default:
        $("#default").show("slow");
    }
    else
    {
        //all elements hidden show this element.
        element.show("slow");
    }
}

然后可以在点击事件中调用该函数，如下所示：

$( "#click2" ).click(function() {
    toggleInfoTable($( "#table2" ))
});

Answer 2

一种方法是：

// binding a click-handler to all <div> elements whose 'id' starts with
// 'click':
$('div[id^=click]').on('click', function () {
    // getting the numbers from the end of the 'id' string:
    var num = (/\d+$/).exec(this.id);

    // if there is a num, and it's a base-10 number:    
    if (num && parseInt(num, 10)) {
        // the <table> we're toggling is:
        var table = $('#table' + num);
        // we toggle that <table>,
        // then find its sibling elements, and hide them:
        table.toggle('slow').siblings().hide('slow');

        // then we select the '#default' <table> and, if the <table> we
        // toggled is ':hidden' we show the '#default', otherwise we hide it:
        $('#default').toggle('slow', table.is(':hidden'))
    }
});

JS Fiddle demo

参考文献：

JavaScript的：
- JavaScript Regular Expressions。
- parseInt()。
- RegExp.prototype.exec()。
jQuery的：
- is()。
- hide()。
- siblings()。
- toggle()。

Answer 3

就个人而言，我会设置某种活动的非活动标志变量，并检查按钮点击次数以确定要采取的操作。（为了简洁，我只在下面显示了一个函数，同样的格式适用于两者，并且JSfiddle正确实现了这两个函数）

请参阅此示例了解标志变量方法： DEMO

var table1 = 0, table2 = 0;
$( "#click1" ).click(function() {
    if(table1 == 0) {
        //show + hide
        $( "#table1" ).show("slow");
        $( "#table2" ).hide("slow");
        $( "#default" ).hide("slow");
        //set flags
        table1 = 1;
        table2 = 0;
    }
    else {
        //show + hide
        $( "#default" ).show("slow");
        $( "#table2" ).hide("slow");
        $( "#table1" ).hide("slow");
        //set flags
        table1 = 0;
        table2 = 0;
    }
});

多个jquery切换如何返回默认值？

3 个答案: