Question

我有三个按钮，用于克隆div，它将在单击的按钮之前显示div。当前，单击按钮时，div将出现在所有三个按钮之前。我需要单击按钮才能将div插入到单击的按钮之前。

var toAppend = $('#appendFullWidthAll').children();

$('#showContent').click(function() {
  toAppend.clone().insertBefore('.show');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="appendFullWidthAll" class="d-none">
  <ul>
    <li>Test Content</li>
    <li>Test Content</li>
    <li>Test Content</li>
    <li>Test Content</li>
  </ul>
</div>

<div class="1">
  <a class="btn btn-primary show" id="showContent">Click Here</a>
</div>

<div class="2">
  <a class="btn btn-primary show" id="showContent">Click Here</a>
</div>

<div class="3">
  <a class="btn btn-primary show" id="showContent">Click Here</a>
</div>

Answer 1

您正在插入所有具有类show的元素，这是您的主要问题。解决方案是使用$(this)选择器捕获您单击的元素，如下所示：

$('.btn').click(function() {
    toAppend.clone().insertBefore($(this));
});

Answer 2

首先，HTML中的ID必须是唯一的。现在，要将任何操作应用于引发事件的元素，请在事件内部使用关键字this。但是请记住this是JavaScript关键字，因此请使用$(this)将其转换为jQuery：

var toAppend = $('#appendFullWidthAll').children();

$('.show').click(function() {
  toAppend.clone().insertBefore(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="appendFullWidthAll" class="d-none">
  <ul>
    <li>Test Content</li>
    <li>Test Content</li>
    <li>Test Content</li>
    <li>Test Content</li>
  </ul>
</div>

<div class="1">
  <a class="btn btn-primary show">Click Here</a>
</div>

<div class="2">
  <a class="btn btn-primary show">Click Here</a>
</div>

<div class="3">
  <a class="btn btn-primary show">Click Here</a>
</div>

Answer 3

您可以使用$(this)事件侦听器中的click选择器来获取单击的元素。另外，请勿对多个元素使用相同的id属性，我使用click类选择器代替了show侦听器，而不是使用id的错误选择器属性。检查下一个示例：

$(document).ready(function()
{
    var toAppend = $('#appendFullWidthAll').children();

    $('.show').click(function()
    {
        var clickedButton = $(this)
        toAppend.clone().insertBefore(clickedButton);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="appendFullWidthAll" class="d-none">
<ul>
<li>Test Content</li>
<li>Test Content</li>
<li>Test Content</li>
<li>Test Content</li>
</ul>
</div>

<div class="1">
<a class="btn btn-primary show" id="showContent1">Click Here</a>
</div>

<div class="2">
<a class="btn btn-primary show" id="showContent2">Click Here</a>
</div>

<div class="3">
<a class="btn btn-primary show" id="showContent3">Click Here</a>
</div>

Answer 4

请不要使用相同的ID 3次。元素的ID对于HTML页面而言必须是唯一的。请尝试用这种方式实现您的目标

var toAppend = $('#appendFullWidthAll').children();

$('.btn.show').click(function() {
   const clickedButton = $(this);
   toAppend.clone().insertBefore(clickedButton);
});

查找最接近的元素并在元素之前插入

4 个答案: