jQuery的按鈕單擊無法在fieldset第二次？

Question

我有11個FieldSet使用，還有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

在單擊按鈕時，使用：button選擇器和字段集id並假設文本僅保留數字（如果它是id或在數據屬性或值（如果代碼進行了適當更改）也可以使用）以下代碼將隱藏所有字段集，僅顯示與單擊按鈕的ID匹配的字段集。 請注意，由於要考慮11個字段集和按鈕-這將允許從一個代碼中控制所有按鈕和字段集。 注意，我只是為了演示目的而對一些字段集進行了虛擬化。

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

在文檔中寫好您的jQuery

$(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小提琴： https : //jsfiddle.net/euftx1a6/

Answer 3

顯示一個字段集並使用hide（）隱藏其他字段集。

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