Question

我有动态创建的按钮，假设创建了5个按钮button1，button2，button3，button4，button5。当我点击某个按钮（比方说， button1 ）时，会创建一个div（比如 div1 ）。当我点击其他按钮（例如 button2 ）时，会创建另一个div（例如 div2 ）。我想一次显示一个。也就是说，当我点击 button1 时，应显示 div1 ，并且不应显示其他div。但是在我的代码中，当我点击button1时，div1被创建了。当我点击 button2时附加div2 。我想用div1替换div2。

我尝试过使用 replaceWith（）并检查兄弟姐妹。但它没有奏效。

这是我的代码：

的javascript：

$(document).ready(function(){
var request = $.ajax({'url': '/FunctionName'}); 
request.done(function(response) 
 {
    var output = document.getElementById('output');
    response = JSON.parse(response)
    response.forEach(function(item){
    var button = document.createElement("input");
button.type = "button";
button.value = item[0];
button.name= item[0];
button.onclick = createDiv; 
output.appendChild(button);


   function createDiv() {
        var div = document.createElement('div');
        div.setAttribute("id", item[0]);
        div.setAttribute("class","inner");
    div.innerHTML = item[1];
    showDiv.appendChild(div);
   }

});
 });
 request.fail(function(jqXHR, textStatus) 
 {
   alert('Request failed: ' + textStatus);
 });


 });

HTML：

<div id="regex_1" class="tab-pane fade">
    <div id="output" class="panel panel-default" style="float:left; width: 30%" >
    </div>
    <div id="showDiv" class="panel panel-default" style="float:left; width: 70%" >
    </div>
</div>

Answer 1

这是一个简单的替换div代码。你期待吗？

＆＃13;

$(".buttonShowDiv").on("click", function(){
  $("#mainDiv .replaceDiv").replaceWith($(this).closest("div").find(".replaceDiv").clone());
  $("#mainDiv .replaceDiv").show();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class="div1 replaceDiv" hidden="hidden">
    <p>This is div 1</p>
  </div>
  <input type="button" class="buttonShowDiv" value="button 1"/>
</div>
<div>
  <div class="div2 replaceDiv" hidden="hidden">
    <p>This is div 2</p>
  </div>
  <input type="button" class="buttonShowDiv" value="button 2"/>
</div>
<div id="mainDiv">
  <div class="replaceDiv">
    <p>This is default div</p>
  </div>
</div>

＆＃13;

Answer 2

为你的div添加一个类，比如'alldivs'。

因此除了您正在创建的div之外，所有div都将被隐藏。

function createDiv() {
    var alldives=document.getElementsByClassName('alldivs');
    alldivs.display='none';
    var div = document.createElement('div');
    div.setAttribute("id", item[0]);
    div.setAttribute("class","inner alldivs");
    div.innerHTML = item[1];
    showDiv.appendChild(div);

}

通过这种方式，您可以隐藏之前创建的所有其他div，并仅显示当前的div。

javascript-单击按钮替换一个div（动态创建）与其他div（动态创建）

2 个答案: