Question

我想点击加号，然后在每一步显示下一个字段，但我的代码在第三步不起作用。是否有任何方法可以无限时间执行这些步骤？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>

Answer 1

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

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

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>

_{在IE10 +}

中受支持

Answer 2

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

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

另一种选择是jquery：

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

查看jsfiddle。

Answer 3

由于您已标记了jquery，因此可以取消所有这些（重复ID）和showField（），并在doc load中添加以下内容：

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

[编辑：哦，这是fiddle]

但是，我不确定当点击第三个+时你想要发生什么，因为没有更多的div显示。

Answer 4

在所有div中

$model = new \yii\base\DynamicModel(['KOMENTAR']); $model->addRule(['KOMENTAR'], 'string', ['max' => 128]); if ($model->load(Yii::$app->request->post()) && $model->validate()) { // do what you want }到Change id="hiddenfield"并更改showfield，如下所示： -

class="hiddenfield"

注意： - 支持的浏览器IE9 +，Chrome 4 +，FF3 +。 http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

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

4 个答案: