非常独特的克隆问题 - 单个页面上但不同 ID 上的多个克隆活动

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

我有两组列表，一次完成，一组不完整...如果我单击完整的行项目，它应该转移到不完整的列表（前置），反之亦然。

代码非常简单，我使用基本相似的代码从不完整转移到完整，从完整转移到不完整。

未完成至完成的名单转移工作。

完整到不完整的传输则不然。 （克隆过程似乎没有进行……它确实克隆了对象，并对克隆的对象进行了更改，但是当我需要它将克隆的对象添加到不完整的列表 id 之前时，它不会这样做。

https://jsfiddle.net/35nbpefz/2/

$("body").on("click", ".incompletetasklist", function () {
    var id=$(this).attr('id');
    var incomp_task=$(this).clone().addClass('completetasklist').addClass('bg-infolight').removeClass('incompletetasklist');
    $('#quicktaskcomplete').prepend(incomp_task); 
    $("#"+id).remove();
});

// complete task to incomplete task

$("body").on("click", ".completetasklist", function () {
    //console.log($(this).attr('id'));
    var id=$(this).attr('id');
  var comp_task=$(this).clone().addClass('incompletetasklist').removeClass('bg-infolight').removeClass('completetasklist');
    //var comp_task=$(this).clone();
    //console.log(comp_task);
    $('#quicktaskincomplete').prepend(comp_task); 
    $("#"+id).remove();
});

我创建了一个jsfiddle...我知道这一定是很简单的东西，但我看不到它。我尝试过 prependTo ，它有一个完全不同的结果。不太确定我做错了什么。它实际上是相同的代码.. .我做错了什么？

我还注意到，如果我将不完整的 div 位置与已完成的 div 位置互换，第二个克隆功能将起作用...但现在第一个克隆功能不起作用...我希望我在这里有意义

https://jsfiddle.net/35nbpefz/3/

jquery clone
2个回答
1
投票

代码中的罪魁祸首是在将链接添加到另一个列表之前删除该链接。

原因很简单：当相同的

id
出现两次时，总是最后一个受到影响。所以
$("#"+id).remove();
总是只删除前置链接。

解决方案：代替

$("#"+id).remove();
做
$(this).remove();

工作片段：

$("body").on("click", ".incompletetasklist", function() {
  var id = $(this).attr('id');
  var incomp_task = $(this).clone().addClass('completetasklist').addClass('bg-infolight').removeClass('incompletetasklist');
  $('#quicktaskcomplete').prepend(incomp_task);
  $(this).remove();
});

$("body").on("click", ".completetasklist", function() {
  var id = $(this).attr('id');
  var comp_task = $(this).clone().addClass('incompletetasklist').removeClass('bg-infolight').removeClass('completetasklist');
  $('#quicktaskincomplete').prepend(comp_task);
  $(this).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<p> INCOMPLETE LIST </p>
<div class="list-group" id="quicktaskcomplete" style="border:1px #000 solid;">
  <a href="#" id="12" class="completetasklist list-group-item list-group-item-action bg-infolight">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">edited</h6>
    </div>
  </a>
  <a href="#" id="140" class="completetasklist list-group-item list-group-item-action bg-infolight">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">Toilet cistern coming away from wall. Needs screwing back in</h6>
    </div>
  </a>
  <a href="#" id="482" class="completetasklist list-group-item list-group-item-action bg-infolight">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">The outside tap is leaking; it needs attention ASAP.</h6>
    </div>
  </a>
  <a href="#" id="483" class="completetasklist list-group-item list-group-item-action bg-infolight">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">The front door plate is loose.</h6>
    </div>
  </a>
  <a href="#" id="484" class="completetasklist list-group-item list-group-item-action bg-infolight">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">The floor at the entrance side is very soft; it does not come from the kitchen or bathroom side.</h6>
    </div>
  </a>
  <a href="#" id="485" class="completetasklist list-group-item list-group-item-action bg-infolight">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">HWC door – hinges missing – unsafe with the kids in the house.</h6>
    </div>
  </a>
  <a href="#" id="486" class="completetasklist list-group-item list-group-item-action bg-infolight">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">Bathroom – moldy and rotten</h6>
    </div>
  </a>
  <a href="#" id="487" class="completetasklist list-group-item list-group-item-action bg-infolight">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">RHS corner bedroom - Light fitting hanging loose.</h6>
    </div>
  </a>
  <a href="#" id="488" class="completetasklist list-group-item list-group-item-action bg-infolight">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">Stove; the front of the door is loose.</h6>
    </div>
  </a>
  <a href="#" id="489" class="completetasklist list-group-item list-group-item-action bg-infolight">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">The gutter at the carport is broken</h6>
    </div>
  </a>
  <a href="#" id="490" class="completetasklist list-group-item list-group-item-action bg-infolight">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">62bArc1 62bArc1 this is a test33366</h6>
    </div>
  </a>
  <a href="#" id="491" class="completetasklist list-group-item list-group-item-action bg-infolight">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">The exterior of the property needs a wash</h6>
    </div>
  </a>
  <a href="#" id="492" class="completetasklist list-group-item list-group-item-action bg-infolight">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">Vanity door handles missing</h6>
    </div>
  </a>
</div>

<p> COMPLETE LIST </p>
<div class="list-group" id="quicktaskincomplete" style="border:1px #000 solid;">
  <a href="#" id="493" class="incompletetasklist list-group-item list-group-item-action ">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">Kitchen cupboards: Drawer and doors missing, also knobs missing.</h6>
    </div>
  </a>
  <a href="#" id="494" class="incompletetasklist list-group-item list-group-item-action ">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">Curtains missing</h6>
    </div>
  </a>
  <a href="#" id="1154" class="incompletetasklist list-group-item list-group-item-action ">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">fix fence</h6>
    </div>
  </a>
  <a href="#" id="1155" class="incompletetasklist list-group-item list-group-item-action ">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">62bArc5 testing2222222 fdgffdgd gggg</h6>
    </div>
  </a>
  <a href="#" id="1156" class="incompletetasklist list-group-item list-group-item-action ">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">testinggg</h6>
    </div>
  </a>
  <a href="#" id="1157" class="incompletetasklist list-group-item list-group-item-action ">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">test2</h6>
    </div>
  </a>
  <a href="#" id="1181" class="incompletetasklist list-group-item list-group-item-action ">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1" style="font-size: 0.9rem">ddd</h6>
    </div>
  </a>
</div>

使用 

data-attributes
和单个事件处理程序代码的另一种方法：https://jsfiddle.net/6bfetqka/

0
投票

另一种选择是不克隆，而只是移动项目：

$("body").on("click", ".incompletetasklist", function () {
    $(this).addClass('completetasklist').addClass('bg-infolight').removeClass('incompletetasklist');
    $('#quicktaskcomplete').prepend(this); 
});

$("body").on("click", ".completetasklist", function () {
    $(this).addClass('incompletetasklist').removeClass('bg-infolight').removeClass('completetasklist');
    $('#quicktaskincomplete').prepend(this); 
});

这会移动项目并设置正确的类别。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.