Question

我刚刚创建了一张卡片表格（引导程序），有一个加号图标和隐藏的内容（id = mycontent_1，显示：无）。我想做的事情列出如下。我试图在我的Java脚本上做第一个，但是它不起作用。

当我单击加号图标时，应执行我的功能（切换器），并且该图标将被隐藏并且其内容（文本框和删除按钮）必须可见。
相反，当我单击删除按钮时，我的内容（文本框和删除按钮）必须不可见，并且加号图标应该可见。

您的需要对我的两个功能有所帮助。这是我的jsfiddle代码。

https://jsfiddle.net/Sanchez/aq9Laaew/219304/

       <div class="col-sm-6">
            <div class="card">
              <div class="card-header" id="cardHeader1" style="visibility: hidden;"> no name </div>
          <div class="card-body">
            <a href="#" class="btn btn-info btn-lg" onclick="toggler('myContent_1');">
              <span class="glyphicon glyphicon-plus" id=icon1  onclick="toggler('myContent_1');"></span> Plus 
            </a>
                <div id="myContent_1" class="card-title" style="display: none;" >
              <form action="" method="post">
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">Number</span>
                    </div>
                    <input type="text" id="notiSeq_1" name="notiSeq" class="form-control" value="">
                    <div class="input-group-append">
                    <span class="input-group-text">
                      <i class="fa fa-sort-numeric-asc"></i>
                    </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">Title</span>
                    </div>
                    <input type="text" id="title_1" name="title" class="form-control" value="">
                    <div class="input-group-append">
                    <span class="input-group-text">
                      <i class="fa fa-tumblr"></i>
                    </span>
                    </div>
                  </div>
                </div>

                <div class="form-group form-actions">
                   <button type="button" id="delBtn_1" class="btn btn-danger">Delete</button>
                </div>
                </form>
                </div>
                </div>
                </div>
                </div>



function toggler(divId){  

   var tempId = divId.slice(-1);
   var x = document.getElementById("icon" + tempId);
   var y = document.getElementById("cardHeader" + tempId);
   x.style.display = "none";
   y.style.visibility = "visible";
   $("#delBtn_" + tempId).show();
   $("#" + divId).toggle();

}

Answer 1

首先，您应该将js代码放在身体前面的头上。然后，将handleChange = e => { const searchTerm = e.target.value; this.setState({ searchTerm: searchTerm }) if (searchTerm.trim() === '') { this.props.resetSearch() } }标记替换为a 最后在删除按钮的onclick上调用button函数

toggler

更新的演示：https://jsfiddle.net/1s390orm/

单击图标时如何显示和隐藏我的内容

1 个答案: