javascript - jquery 按钮单击在字段集上第二次不起作用？

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 或数据属性或值，这也将起作用)，在 onclick 上按钮的以下代码将隐藏所有字段集，并仅显示与单击按钮的 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>