切换喜欢按钮以创建和删除输入框答案

【问题标题】：Toggle like button to create and remove input box切换喜欢按钮以创建和删除输入框
【发布时间】：2015-04-05 04:41:28
【问题描述】：

我正在创建一个带有一些按钮的 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>

【问题讨论】：

标签： javascript html

【解决方案1】：

如果您乐于使用 Jquery，Something like this 可能就是您想要的。

与其说是“创建”一个元素，不如说是“切换”它的可见性

$(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 + '" />');
    }

  });
});

.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);
}

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

编辑历史记录

根据 cmets 将 sn-p 更改为包括 2 个切换
在Tambo的帮助下重构了 jquery 方法
将标记改为“附加”和“删除”

【讨论】：

这不是一个纯 JavaScript 解决方案，因为您使用的是 jquery。这个问题没有用 jquery 标记。
@kasperTaeymans：这就是为什么我说 如果你乐于使用 Jquery
这个有帮助。但是在我的页面中有很多输入框。所以我想的是根据按钮点击创建新的输入。我的想法是否正确？感谢您的快速回答@jbutler483
@jbutler483：为每个按钮单独切换。这样每个按钮都会相应地生成输入框
@jason: Jquery 也被重构了

【解决方案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>

【讨论】：

感谢您的帮助@ketan。但我真正需要的是创建一个 div。因为这个输入框可能会有所不同，所以以后我不想在代码中编辑。

【解决方案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();

【讨论】：