为事件jQuery选择特定的新附加节点副本

问题描述 投票：0回答：2

由于Javascript的复杂语法，我正在转向jQuery。我写了一个JQ脚本来复制并附加一个div及其事件监听器。它应该打开一个按钮的内容，并能够删除与其内容相同的按钮。但是，打开内容对所有复制的元素都这样做，删除div仅对顶部div执行此操作。有人可以帮忙解决这个问题吗？

$(document).ready(function() {
  $(".test2").click(function() {
    $("#samplesinfo").clone(true).insertAfter("#paste");
  });
  $(".accordion").click(function() {
    $(".panel").toggle();
  });
  $(".delbtn").click(function() {
    $("#samplesinfo").remove();
  });
});
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.close {
  float: right;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h2>Example</h2>
<button class="test2">ADD</button>

<div id="samplesinfo">
  <div class="test">
    <button class="delbtn" id="delbtn" style="float: right;">Delete</button>
    <button id="sample" class="accordion" style="float: left;">Button</button>
    <div id="usrInput" class="panel">
      <input type="text" name="test">
    </div>
  </div>
</div>
<div id="paste">
</div>

此外，每个按钮都包含用户输入选项。应该使用不再需要的特定用户输入来删除div。例如，如果您在第三个复制元素中输入“hello”并按下删除按钮，它应该只删除表示“hello”的元素，而不是从顶部删除。

jquery html events
2个回答
0
投票

在另一个答案中，当您“添加”时，它会复制第一个，包括input内容（如果您输入的话）。

我经常喜欢使用隐藏模板，所以我建议你这样做：

  • 从class="hidden"开始只使用一个元素。这是“模板”。
  • 单击“添加”时，“模板”将被复制，可见，并在最后一个元素后追加。
  • 在加载时，我们触发click事件以一个可见元素开始。
  • 因为你应该避免内联样式，我也把它移到CSS。

工作片段：

var index = 0;
$(".test2").click(function() {
  var element = $(".samplesinfo.hidden").clone(true);
  element.removeClass('hidden').insertAfter(".samplesinfo:last");
  element.find('.delbtn').text('Delete ' + ++index);
});

$(".accordion").click(function() {
  $(this).next(".panel").toggle();
});

$(".delbtn").click(function() {
  $(this).closest(".samplesinfo").remove();
});

// Trigger click on load
$(".test2").trigger('click');
.hidden{
  display: none;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  float: left;
}

.delbtn {
  float: right;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h2>Example</h2>
<button class="test2">ADD</button>

<div class="samplesinfo hidden">
  <div class="test">
    <button class="delbtn">Delete</button>
    <button class="accordion">Button</button>
    <div class="panel">
      <input type="text" name="test">
    </div>
  </div>
</div>

请注意，ids必须是唯一的。 当你想要相对于当前元素（你触发en事件的元素）的元素时，this是一个强大的关键字。

⋅ ⋅ ⋅

这是一个JavaScript版本......

事件监听器不是用JavaScript复制的，所以每次添加新元素时我们都需要调用一个函数！...

片段：

var index = 0;
var template = document.querySelector(".samplesinfo.hidden");

document.querySelector(".test2").onclick = function() {
  var element = template.cloneNode(true);
  element.classList.remove('hidden');
  element.querySelector('.delbtn').innerText = 'Delete ' + ++index;
  var samples = document.querySelectorAll(".samplesinfo");
  var last = samples[samples.length - 1];
  last.parentNode.insertBefore(element, last.nextSibling);
  refresh_listeners();  
}

// Event listeners are not copied with JavaScript, so we need to call this function each time we add a new element!…
function refresh_listeners() {
  document.querySelectorAll(".accordion").forEach(function(elm) {
    elm.onclick = function() {
      elm.nextElementSibling.classList.toggle("hidden");
    }
  });
  document.querySelectorAll(".delbtn").forEach(function(elm) {
    elm.onclick = function() {
      elm.closest(".samplesinfo").outerHTML = '';
    }
  });
}

// Trigger click
document.querySelector(".test2").click();
.hidden {
  display: none;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  float: left;
}

.delbtn {
  float: right;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h2>Example</h2>
<button class="test2">ADD</button>

<div class="samplesinfo hidden">
  <div class="test">
    <button class="delbtn">Delete</button>
    <button class="accordion">Button</button>
    <div class="panel hidden">
      <input type="text" name="test">
    </div>
  </div>
</div>

希望能帮助到你。

0
投票

HTML中的标识符必须是唯一的。在示例中，我使用了CSS类。您需要在当前元素中定位元素，即this上下文

$(document).ready(function() {
  $(".test2").click(function() {
    var element = $(".samplesinfo:first").clone(true);
    
    element.insertAfter(".samplesinfo:last");

    //Get all delbtn
    var delbtns = $('.delbtn');

    //get last elements index
    var index = delbtns.index(delbtns.last()) + 1;

    //set Text
    element.find('.delbtn').text('Delete' + index)
  });
  
  $(".accordion").click(function() {
    $(this).next(".panel").toggle();
  });
  $(".delbtn").click(function() {
    $(this).closest(".samplesinfo").remove();
  });
});
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.close {
  float: right;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h2>Example</h2>
<button class="test2">ADD</button>

<div class="samplesinfo">
  <div class="test">
    <button class="delbtn" style="float: right;">Delete</button>
    <button id="sample" class="accordion" style="float: left;">Button</button>
    <div id="usrInput" class="panel">
      <input type="text" name="test">
    </div>
  </div>
</div>
<div class="paste">
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.