Question

创建一个带有一些按钮的HTML页面来创建输入框。按钮应该像切换一样。即，在第一次单击输入框时应该出现，如果再次点击相同的按钮，那个特定的输入框需要消失。按钮切换我已经管理。但div并没有创造这是我的切换按钮

<button class="btn" id="button_rd" onclick="setColor('button_rd', '#101010')";>one</button>

以下是javascript

var count = 1;
    function setColor(btn, color) {
        var property = document.getElementById(btn);
        if (count == 0) {
             property.style.backgroundColor = "#f4543c"//red
             property.style.borderColor = "#f4543c"
            count = 1;
        }
        else {
            property.style.backgroundColor = "#00a65a"//green
            property.style.borderColor = "#008d4c"
            count = 0;

            var newdiv = '<div class="form-group"><label for="exampleInputEmail1">email</label>'
            +'<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div>'
            document.getElementById("create").append(newdiv);
        }
    }

以下是我需要输入框显示的位置（在此div内）

<div class="box-body" id="create">
</div>

Answer 1

如果您乐意使用Jquery，Something like this可能就是您正在寻找的内容。

它并不像创造＆＃39;一个元素，更实际的是“切换”＃39;它的知名度

＆＃13;

$(document).ready(function() {
  $('[id^=bool]').click(function() {
    var id = $(this).attr("id").substr($(this).attr("id").length - 1);
    $('[id^=bool' + id + '] .switcher').toggleClass("switched");
    var x = $('[id=input' + id + ']').length;
    if (x > 0) //there is one there
    {
      $('[id=input' + id + ']').remove();
    } else {
      $('body').append('<input type="text" id="input' + id + '" placeholder="input ' + id + '" />');
    }

  });
});

＆＃13;

.bool {
  height: 40px;
  width: 100px;
  background: darkgray;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 5px 0 6px gray;
  border: 1px solid black;
}
.bool:before {
  content: "On";
  left: 10%;
  position: absolute;
  top: 25%;
}
.bool:after {
  content: "Off";
  right: 10%;
  position: absolute;
  top: 25%;
}
.switcher {
  height: 100%;
  width: 50%;
  position: absolute;
  background: lightgray;
  top: 0;
  left: 0;
  z-index: 5;
  transform: translateX(0px);
  transition: all 0.5s;
  border-radius: 5px;
  box-shadow: inset 0 0 6px black;
}
.switched {
  transform: translateX(50px);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bool" id="bool1">
  <div class="switcher"></div>
</div>
<div class="bool" id="bool2">
  <div class="switcher"></div>
</div>

＆＃13;

修改历史记录

根据评论
在Tambo
更改标记以“追加”＃39;和＆＃39;删除＆＃39;代替

Answer 2

OnClick将以下代码写入隐藏：

document.getElementById('create').style.display = 'none';

以下代码显示：

document.getElementById('create').style.display = 'block';

像：

<强> JavaScript的：

<script type="text/javascript">
var count = 1;

function hidShow()
{
if(count == 1)
{
    document.getElementById('create').style.display = 'none';
    count = 0;
}
else
{
    document.getElementById('create').style.display = 'block';
    count = 1;
}
}
</script>

<强> HTML：

<button id="button_rd" onClick="hidShow()">one</button>

<div class="box-body" id="create">
    <input type="text" id="txt"/>
</div>

Answer 3

而不是

document.getElementById("create").append(newdiv);

'innerHTML'对我有用，如下所示：

document.getElementById("create").innerHTML = '<div class="form-group"><label for="exampleInputEmail1">email</label>'
            +'<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div>'

删除我使用的切换中的div

$('div_id').remove();

像按钮一样切换以创建和删除输入框

3 个答案: