mutlple jquery切换如何返回到默认值？

Question

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

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

如果＃table1和＃table2都隐藏了，我想要#default显示，而且不是这样。

我能想出的最好不起作用：

$("#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

就个人而言，我会成立某种形式的有效，无效标志变量，并检查这些按钮上点击来确定要采取的行动。 （我只显示出低于一个功能为简明起见，相同的格式适用于和所述的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; 
    } 
}); 

Answer 2

有很多的这样做的方法。

看看这个小提琴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 3

一种方法是：

// 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()。