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

写好你的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 fiddle : https://jsfiddle.net/euftx1a6/

Answer 2

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

Answer 3

使用 :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>

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

jquery button click not working second time on fieldset?

javascript

jquery

fieldset