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

他们第一次正常工作不起作用，只抛出警报否则如果可能跳过fieldset？请给我一个建议。

Answer 1

使用：按钮选择器和字段集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>

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

jquery按钮点击不在fieldset第二次工作？

3 个答案: