javascript - 单击时为每个按钮添加/删除 div

Question

我正在尝试使用 append 为每个按钮提供自己的 div (.modal-item)，可以在 .modal 内部创建和删除该 div (.modal-item)单击按钮时的 容器。每个 .item 都有自己的按钮和嵌套在其中的不同内容。

我需要什么作为示例:如果我单击标记为 Btn 1 的按钮，我需要在内部创建一个 .modal-item div .modal 包含来自 Btn 1 .item 的内容。如果我再次单击 Btn 1，它将被删除。每个按钮也是如此。

这些按钮应充当用于创建和删除 .modal-items 的复选框。换句话说，每个 .modal-item 的添加/删除都是由它的按钮处理的。

$(function() {
  $('#btn').click(function() {
    var newDiv = $('<div class="modal-item"><h4><a>Dynamic Title</a></h4> </div>');
    $('.modal').append(newDiv);
  });
});

.container {
  display: flex;
  border: 1px solid blue;
}

.item,
.modal-item {
  width: 100px;
  border: 1px solid;
}

.modal {
  display: flex;
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item">
    <button id="btn">Btn 1</button>
    <h4> Test 1 </h4>
    <div class="subtitle"> Title 1 </div>
    <div class="info"> This is Info / Description 1. </div>
  </div>
  <div class="item">
    <button id="btn">Btn 2</button>
    <h4> Test 2 </h4>
    <div class="subtitle"> Title 2 </div>
    <div class="info"> This is Info / Description 2. </div>
  </div>
  <div class="item">
    <button id="btn">Btn 3</button>
    <h4> Test 3 </h4>
    <div class="subtitle"> Title 3 </div>
    <div class="info"> This is Info / Description 3. </div>
  </div>
</div>
<div class="modal"></div>

Answer 1

第一:id 必须是唯一的，因此您需要将 id="btn" 更改为 class="btn"

第二:通过为每个 btn 使用 data 属性并将其传递给 modal-item div 可以完成

$(function() {
  $('.btn').click(function() {
    var newDiv = $('<div data-btn="'+$(this).attr("data-btn")+'" class="modal-item"><h4><a>Dynamic Title'+ ($(this).closest('.item').index() + 1) +'</a></h4> </div>');
    if($('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').length < 1 ){
      $('.modal').append(newDiv);
    }else{
      $('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').remove();
    }
  });
});

.container {
  display: flex;
  border: 1px solid blue;
}

.item,
.modal-item {
  width: 100px;
  border: 1px solid;
}

.modal {
  display: flex;
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item">
    <button class="btn" data-btn="btn1">Btn 1</button>
    <h4> Test 1 </h4>
    <div class="subtitle"> Title 1 </div>
    <div class="info"> This is Info / Description 1. </div>
  </div>
  <div class="item">
    <button class="btn" data-btn="btn2">Btn 2</button>
    <h4> Test 2 </h4>
    <div class="subtitle"> Title 2 </div>
    <div class="info"> This is Info / Description 2. </div>
  </div>
  <div class="item">
    <button class="btn" data-btn="btn3">Btn 3</button>
    <h4> Test 3 </h4>
    <div class="subtitle"> Title 3 </div>
    <div class="info"> This is Info / Description 3. </div>
  </div>
</div>
<div class="modal"></div>