一个元素中的onclick显示javascript中的另一个元素_Javascript_Jquery_Forms_Css

一个元素中的onclick显示javascript中的另一个元素

javascript jquery forms css

一个元素中的onclick显示javascript中的另一个元素,javascript,jquery,forms,css,Javascript,Jquery,Forms,Css,我想点击plus，然后在每个步骤中显示下一个字段，但我的代码在第三步中不起作用。有没有方法无限期地执行这些步骤？tnx <html> <head> <script> function showfield(){ document.getElementById("hiddenfield").style.display="block"; } </script> </head> <body> <div class="form

我想点击plus，然后在每个步骤中显示下一个字段，但我的代码在第三步中不起作用。有没有方法无限期地执行这些步骤？tnx

<html>
<head>
<script>
function showfield(){
document.getElementById("hiddenfield").style.display="block";
}
</script>
</head>

<body>
<div class="form-group" >
<div class="rightbox"> <label for='phone'>Phone1</label></div>
<input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div>
</div>

<div class="form-group" style="display:none;" id="hiddenfield">
<div class="rightbox"><label for='phone'>Phone2</label></div>
 <input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div></div>
</div>

<div class="form-group" style="display:none;" id="hiddenfield">
<div class="rightbox"><label for='phone'>Phone3</label></div>
 <input type="tel" value="" />
<div class="plus" onClick="showfield()">+</div></div>
</div>
</body>
</html>


函数showfield（）{
document.getElementById（“hiddenfield”）.style.display=“block”；
}
电话1
+
电话2
+
电话3
+

正如其他人所指出的，元素的ID必须是唯一的，您可以使用类对类似的元素进行分组

您需要做的是显示第一个隐藏字段组

函数showfield（）{
var el=document.querySelector（“.hiddenfield”）；
如果（el）{
el.classList.remove（'hiddenfield'）
}
}

.hiddenfield{
显示：无；
}


电话1
+
电话2
+
电话3
+

您可以为每个隐藏字段使用唯一的id，然后将当前id作为参数发送给函数

function showfield(id) {
     document.getElementById(id).style.display="block";
}

另一个选项是jquery：

$('.plus').on('click', function() {
    $(this).parent().next().show();
});

签出。

因为您已经标记了jquery，所以可以删除所有这些（重复ID）和showField（），并在doc load中添加以下内容：

$('.plus').on('click', function() {
    $(this).parent().next().show();
});

[编辑：哦，这是

但是，我不确定单击第三个+时您希望发生什么，因为没有更多的div可显示。

将所有div中的id=“hiddenfield”

更改为

class=“hiddenfield”

，并将showfield更改如下：-

function showfield() {
    document.getElementsByClassName("hiddenfield").style.display="block";
}

注意：-支持的浏览器有IE9+、Chrome4+、FF3+。

id必须是唯一的…

id

应该是唯一的