-1

クリックした内容に応じて表示/非表示ボタンのプログラムを作成しました。簡単ですが、大きな問題があります。このボタンを階層的に配置したくないので、最初に "
"タグを追加しようとしましたが、.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>
4

1 に答える 1

0

試す

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();
});

デモ：フィドル

于 2013-03-27T11:56:38.867 に答える