onclick in one element show another element in jav

2019-08-14 18:04发布

站内问答 / JavaScript
787 4 5

i would like to click in plus ,then show the next field in every step but my code does not work in third step .is there any method to do these steps for unlimited time?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>

4条回答
兄弟一词,经得起流年.
2楼-- · 2019-08-14 18:16

Change id="hiddenfield" to class="hiddenfield" in all divs and change showfield as below :-

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

Note:- Supported Browsers IE9+, Chrome 4+, FF3+. http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

查看更多
0人赞 添加讨论(0) 举报
地球回转人心会变
3楼-- · 2019-08-14 18:20

Since you've tagged jquery, you could do away with all those (duplicate ids) and showField() and within doc load add this:

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

[Edit: Oh, here's the fiddle]

However, I'm not sure what you want to happen when the third + is clicked as there are no more divs to show.

查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
4楼-- · 2019-08-14 18:23

You can use unique id for each hidden field, then send current id to your function as parameter.

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

Another option is jquery:

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

Check out jsfiddle.

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
5楼-- · 2019-08-14 18:36

As others noted, ID of an element must be unique, you can use class to group similar elements.

What you need to do is to show the first hidden field group, 

function showfield() {
  var el = document.querySelector(".hiddenfield");
  if (el) {
    el.classList.remove('hiddenfield')
  }
}
.hiddenfield {
  display: none;
}
<div class="form-group">
  <div class="rightbox">
    <label for='phone1'>Phone1</label>
  </div>
  <input type="tel" value="" />
  <div class="plus" onClick="showfield()">+</div>
</div>

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

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

Supported in IE10+

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)