类似开关的按钮可以创建和删除输入框

Toggle like button to create and remove input box

本文关键字：创建 删除 输入 开关 按钮      更新时间：2023-09-26

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

如果您很乐意使用Jquery，那么您可能正在寻找类似的东西。

与其说是"创建"一个元素，不如说是"切换"其可见性

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

编辑历史

  • 根据注释修改了代码段，包括2个切换
  • 在Tambo的帮助下重构jquery方法
  • 已将标记更改为"append"answers"remove"

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>

而不是

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

为了删除toggle上的div，我使用了

$('div_id').remove();
相关文章：