0

我有一个表单，允许用户单击“添加”按钮以显示更多表单字段。然后，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>
4

3 回答 3

2

虽然您可以使用该设置，但不要更改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();
    }
});
于 2013-05-17T18:33:06.487 回答
1

您似乎在尚不存在的按钮上设置了单击事件（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;

    }
});
于 2013-05-17T18:31:34.450 回答
0

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

$(document).on('click', '#add_2', function() {
    //do stuff
});
于 2013-05-17T18:31:24.560 回答