Question

我有一个表单，允许用户单击“添加”按钮以显示更多表单字段。然后，更改id，以便当用户再次点击时，会显示一组不同的表单字段。第一个实例按预期工作，但是，我无法显示第二组字段。我是JS的新手，所以我不太清楚我在这里缺少什么。谢谢！

HTML：

<p>
 <table>
  <tr>
<td width="250px">
  Shipping Method
</td>
<td>
  <select name="shipmeth_id">
   <option value="1">UPS</option>
   <option value="2">FedEx</option>
  </select>
</td>
  </tr>
  <tr>
<td>
 Account Number
</td>
<td>
 <input id="ship_num" name="ship_num" type="text" />
</td>
  </tr>
  <tr>
<td>
  Zip Code
</td>
<td>
  <input id="ship_zip" name="ship_zip" type="text" />
</td>
  </tr>
 </table>
</p>
<p class="extra_ship" style="display:none;">
  <table>
<tr>
  <td width="250px">
    Shipping Method
  </td>
  <td>
    <select name="shipmeth_id2">
      <option value="1">UPS</option>
      <option value="2">FedEx</option>
    </select>
  </td>
</tr>
<tr>
  <td>
    Account Number
  </td>
  <td>
    <input id="ship_num" name="ship_num" type="text" />
  </td>
</tr>
<tr>
  <td>
    Zip Code
  </td>
  <td>
    <input id="ship_zip" name="ship_zip" type="text" />
  </td>
</tr>
  </table>
</p>
<p class="extra_ship2" style="display:none;">
  <table>
<tr>
  <td width="250px">
    Shipping Method
  </td>
  <td>
    <select name="shipmeth_id3">
      <option value="1">UPS</option>
      <option value="2">FedEx</option>
    </select>
  </td>
</tr>
<tr>
  <td>
    Account Number
  </td>
  <td>
    <input id="ship_num" name="ship_num" type="text" />
  </td>
</tr>
<tr>
  <td>
    Zip Code
  </td>
  <td>
    <input id="ship_zip" name="ship_zip" type="text" />
  </td>
</tr>
  </table>
</p>
<p>
  <table>
<tr>
  <td width="250px" style="text-align:right;">
    Add Another Account
  </td>
  <td width="50px">
    &nbsp;
  </td>
  <td>
    <button name="add_ship" value="add" type="button" id="add_1" class="add_button" >
      <img src="img/plus_button.png">
    </button>
  </td>
</tr>
  </table>
</p>

和JS：

<script type="text/javascript">
$('#add_1').click(function() {
    $('.extra_ship').show();
    document.getElementById('add_1').id = 'add_2';
});
$('#add_2').click(function() {
    $('.extra_ship2').show();
});
</script>

Answer 1

虽然您可以使用该设置，但不要更改id。试试这个：

<button name="add_ship" value="add" type="button" id="add_1" class="add_button" data-state="first_step">

请注意标记末尾的data-state="first_step"属性。

和

$('#add_1').click(function() {
    var $this = $(this),
        state = $this.attr("data-state");
    if (state === "first_step") {
        $('.extra_ship').show();
        $this.attr("data-state", "second_step");
    } else if (state === "second_step") {
        $('.extra_ship2').show();
    }
});

Answer 2

您似乎在一个尚不存在的按钮上设置了一个点击事件（add_2）。

尝试改变这一点：

$('#add_1').click(function() {
    $('.extra_ship').show();
    document.getElementById('add_1').id = 'add_2';
});
$('#add_2').click(function() {
    $('.extra_ship2').show();
});

到此

$('#add_1').click(function() {
    $('.extra_ship').show();
    document.getElementById('add_1').id = 'add_2';
    $('#add_2').click(function() {
        $('.extra_ship2').show();
    });
});

在这种情况下，您还可以使用标志：

var isFirst = true;

$('#add_1').click(function() {
    $('.extra_ship').show();

    if (isFirst) {
        //do first thing
        isFirst = !isFirst;
    } else {
        //do second thing
    }
    //isFirst = !isFirst; //toggles here if needed (remove above toggle)

});

另一种方法是使用计数器，因此每次点击都会增加计数器，然后根据当前计数检查条件。

示例（假设只有一个按钮 - 请根据需要采用）

var counter1 = 0; // for many buttons, go for a "class" approach instead

$('#add_1').click(function() {
    $('.extra_ship').show();
    counter1++;

    switch(counter) {
        case 1:
            /* do things */
            break;
        case 2:
            /* do things */
            break;
        default:
            /* reset counter or do other things */
            break;

    }
});

Answer 3

由于在DOM就绪时不存在#add_2，因此您应该使用.on()来绑定事件。

$(document).on('click', '#add_2', function() {
    //do stuff
});

元素在更改它的id后不会显示

3 个答案: