jquery switch case和之後（任何東西）卡住

Question

我做了一個程序，它是顯示/隱藏按鈕取決於你點擊了什麼。這很簡單，但我有一個很大的問題。我不想按層次來定位這些按鈕，第一次嘗試追加「
」標籤後，但如果使用.after（），則不能殺死該元素。爲什麼？

<button id="vissza">Vissza</button><hr /> <!-- vissza means: BACK --> 
<button id="1">First</button> 
<button id="11">AA</button> 
<button id="111">AA1</button> 
<button id="112">AA2</button> 
<button id="113">AA3</button> 
<button id="114">AA4</button> 
<button id="12">AB</button> 
<button id="121">AB1</button> 
<button id="122">AB2</button> 
<button id="123">AB3</button> 
<button id="124">AB4</button> 
<button id="125">AB5</button> 

<button id="2">Second</button> 
<button id="21">BA</button> 
<button id="211">BA1</button> 
<button id="212">BA2</button> 
<button id="213">BA3</button> 
<button id="214">BA4</button> 
<button id="22">BB</button> 
<button id="221">BB1</button> 
<button id="222">BB2</button> 
<button id="223">BB</button> 

<button id="3">Third</button> 
<button id="31">CA</button> 
<button id="32">CB</button> 
<button id="33">CC</button> 
<button id="34">CD</button> 

<script> 

$("button[id]").hide(); 
$("button[id='1']").show(); 
$("button[id='2']").show(); 
$("button[id='3']").show(); 

$("button").click(function (event) { 
event.preventDefault(); 
var CurrentButtonID = $(this).attr('id'); 

LengthOfAButton = CurrentButtonID.length; 
j = 1; 

var ItIsExist = 1; 

switch (LengthOfAButton) { 
case 1: 
$("button[id]").hide(); 
BeforeStep = CurrentButtonID; 

while (ItIsExist>0) { 
ShowThis = "button[id=" + CurrentButtonID + j + "]"; 
$(ShowThis).show().after('[can not dissappear1]'); 
ItIsExist = $(ShowThis).length; 
j++; 
} 

break; 

case 2: 
$("button[id]").hide(); 
BeforeStep = CurrentButtonID; 

while (ItIsExist>0) { 
ShowThis = "button[id=" + CurrentButtonID + j + "]"; 
$(ShowThis).show().after('[can not dissappear2]'); 
ItIsExist = $(ShowThis).length; 
j++; 
} 

break; 

case 3: 
$("button[id]").hide(); 
BeforeStep = CurrentButtonID; 

while (ItIsExist>0) { 
ShowThis = "button[id=" + CurrentButtonID + j + "]"; 
$(ShowThis).show().after('[can not dissappear3]'); 
ItIsExist = $(ShowThis).length; 
j++; 
} 
break; 

case 6: 

if (BeforeStep.length==1) { 
$("button[id]").hide(); 
CurrentButtonID = BeforeStep.substr(0,0); 
} 
if (BeforeStep.length==2) { 
$("button[id]").hide(); 
CurrentButtonID = BeforeStep.substr(0,1); 
} 
if (BeforeStep.length==3) { 
CurrentButtonID = BeforeStep.substr(0,2); 
$("button[id]").hide(); 
} 
if ((BeforeStep.length>1) && (BeforeStep.length<6)) { 
$("button[id]").hide(); 
} 

while (ItIsExist>0) { 
var ShowThis = "button[id=" + CurrentButtonID + j + "]"; 
$(ShowThis).show().after('[can not dissappear /at backbutton/]'); 
ItIsExist = $(ShowThis).length; 
j++; 
} 
BeforeStep = CurrentButtonID; 
break; 
} 

$("button[id='vissza']").show(); 

}); 


</script> 

Answer 1

嘗試

var btns = $("button[id]").hide(); 
$("#1, #2, #3").show(); 

btns.click(function(e){ 
    var $this = $(this); 
    var regex = new RegExp('^' + $this.attr('id') + '\\d$'); 
    btns.filter(function(i, v){ 
     return regex.test(this.id); 
    }).show(); 
}); 

演示：Fiddle