Javascript 元素不'；更改后不显示'；身份证

我有一个表单，允许用户单击“添加”按钮以显示更多表单字段。然后，更改

id

，以便当用户再次单击时，出现一组不同的表单字段。第一个实例按预期工作，但是，我无法显示第二组字段。我是JS新手，所以我不太确定我在这里遗漏了什么。谢谢

HTML:

运输方式
不间断电源
联邦快递
帐号
邮政编码


运输方式
不间断电源
联邦快递
帐号
邮政编码


运输方式
不间断电源
联邦快递
帐号
邮政编码


添加其他帐户

和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>

$（'#添加1'）。单击（函数（）{
$（'.extra_ship'）.show（）；
document.getElementById（'add_1'）。id='add_2'；
});
$（'#添加2'）。单击（函数（）{
$（'.extra_ship2'）.show（）；
});

由于DOM就绪时不存在

#add_2

，因此应使用

.on（）

绑定事件

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

由于DOM就绪时不存在

#add_2

，因此应使用

.on（）

绑定事件

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

---

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

});

另一种方法是使用计数器，以便每次单击时递增计数器，然后根据当前计数检查条件

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

---

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

});

另一种方法是使用计数器，以便每次单击时递增计数器，然后根据当前计数检查条件

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

---

虽然您可以使用该设置，但不要更改

id

。尝试使用以下方法：

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

---

虽然您可以使用该设置，但不要更改

id

。尝试使用以下方法：

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

---

ID是单数的！页面上不能有多个具有相同id的元素。@epascarello如果您指的是输入字段的id，我知道。我只需复制并粘贴我编辑的代码。这些元素的ID在我的实际站点上是不同的。不过接得好，谢谢！ID是单数的！页面上不能有多个具有相同id的元素。@epascarello如果您指的是输入字段的id，我知道。我只需复制并粘贴我编辑的代码。这些元素的ID在我的实际站点上是不同的。不过接得好，谢谢！只要存储在

数据状态

中的字符串不是JS对象（字符串除外），

.data（'state'）

就可以工作。@Blender我理解，但我不喜欢使用那种约定。我喜欢认为

data-*

属性是静态的，而jQuery的

.data（）

是动态的（有点像

.prop（）

）。我确信我最终会开始使用

.data（）

，但我现在不这么认为：（尽管如此，这是一个很好的观点。@Blender等等，我只是自相矛盾，因为我在某个时候更改了属性。也许我喜欢使用

.data（））

在这种情况下……这很好，谢谢！这看起来与我的原始代码基本上是一样的，尽管使用了不同的方法，那么为什么使用数据状态属性可以工作，但更改id却不行呢？只要存储在

数据状态中的字符串不是JS对象（字符串除外），
.data（'state'））
会起作用。@Blender我理解，但我不喜欢使用那种约定。我喜欢认为
数据-*
属性是静态的，而jQuery的
.data（）
是动态的（有点像
.prop（）
）。我确信我最终会开始使用
.data（）
，我现在不知道：（尽管如此，这是一个很好的观点。@Blender等等，我只是自相矛盾，因为我在某个时候更改了属性。也许我喜欢使用
.data（）
在这种情况下……这很好用，谢谢！这看起来与我的原始代码基本相同，只是使用了不同的方法，所以为什么使用数据状态属性有效，但更改id无效？我喜欢计数器的想法。如果选项数量增加，我可能需要进一步实现这一点rts失控。@DrydenLong计数器自计算机时代以来已被证明坚如磐石：）我在代码中添加了第三种方法（切换）。我喜欢计数器的想法。如果选项数量开始失控，我可能不得不进一步实现这一点。@DrydenLong计数器自计算机时代以来已被证明坚如磐石：）我在代码中添加了第三种方法（切换）。