jqueryボタンフィールドセットの2回目のクリックが機能しませんか？

Question

私は11のフィールドセットを使用してもスキップ目的のための11個のボタン、

Htmlの

<button id="skip1">1</button> 
<button id="skip2">2</button> 
<button id="skip3">3</button> 

のjQuery

$("#skip1").click(function(){ 
    alert("In1") 
     $("#field_1").show(); 
    }); 
$("#skip2").click(function(){ 
    alert("In2") 
     $("#field_2").show(); 
    }); 

    $("#skip3").click(function(){ 
    alert("In3") 
     $("#field_3").show(); 
    }); 

彼らは別の時間は動作しませんでした細かい作業まず時間を、持っている持っている唯一のそれ以外の場合は可能ですか？フィールドセットをスキップすることは可能ですか？私に提案をお願いします。

Answer 1

：ボタンをセレクタとフィールドセットのIDを取得し、テキストが単なる数値であることを前提としています（これがIDの場合やコードが変更された場合のデータ属性または値の場合にも機能しますappropr次のコードはすべてのフィールドセットを非表示にし、クリックされたボタンのIDに一致するコードのみを表示します。これには11個のフィールドセットとボタンがあるので、すべてのボタンとフィールドセットを1つのコードから制御できるようになります。メモデモ目的でいくつかのフィールドセットを作成しました。

$(document).ready(function(){ 
 
       $(":button").click(function() { 
 
        var id=$(this).text(); 
 
        alert("In"+id); 
 
        $('fieldset').hide(); 
 
        $('#field_'+ id).show(); 
 
       }); 
 
    
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="skip1">1</button> 
 
<button id="skip2">2</button> 
 
<button id="skip3">3</button> 
 

 
<form> 
 
    <fieldset id="field_1"> 
 
    <legend>test 1:</legend> 
 
    Name 1: <input type="text"><br> 
 
    Email 1: <input type="text"><br> 
 
    </fieldset> 
 
    
 
    <fieldset id="field_2"> 
 
    <legend>test 2:</legend> 
 
    Name 2: <input type="text"><br> 
 
    Email 2: <input type="text"><br> 
 
    </fieldset> 
 
    
 
    <fieldset id="field_3"> 
 
    <legend>test 3:</legend> 
 
    Name 3: <input type="text"><br> 
 
    Email 3: <input type="text"><br> 
 
    </fieldset> 
 
</form>

Answer 2

文書準備

$(document).ready(function() { 
    $("#skip1").click(function() { 
     alert("In1") 
     $("#field_1").show(); 
    }); 
    $("#skip2").click(function() { 
     alert("In2") 
     $("#field_2").show(); 
    }); 

    $("#skip3").click(function() { 
     alert("In3") 
     $("#field_3").show(); 
    }); 
}) 

JSフィドルの内側にあなたのjQueryを書く：https://jsfiddle.net/euftx1a6/

Answer 3

）は、（1つのフィールドセットを表示し、非表示を使用して他の人を隠し、これを試してみてください：。

使用

$("#skip1").click(function(){ 
     $("#field_1").show(); 
     $("#field_2").hide(); 
     $("#field_3").hide(); 
}); 
$("#skip2").click(function(){ 
     $("#field_2").show(); 
     $("#field_1").hide(); 
     $("#field_3").hide(); 
}); 
$("#skip3").click(function(){ 
     $("#field_3").show(); 
     $("#field_1").hide(); 
     $("#field_2").hide(); 
});