Javascript 在两个div之间移动块

所以我有两个div，里面有一些块：

<div class="list-block 01">
    <span>21@epos.com</span>
    <span class="moveSym" id="01">+</span>
</div>

我知道有很多插件，但我真的很想自己写并学习：）

---

Fiddle需要使用事件委托，因为要执行的处理程序取决于父元素

//move form list blocks to different fields
$('.leftSide01').on('click', '.moveSym', function () {
    console.log($(this).attr('id'));
    var id = $(this).attr('id');
    $(this).text("-");
    $('.leftSide01 .list-block.' + id).appendTo('.rightSide01');
})
$('.rightSide01').on('click', '.moveSym', function () {
    console.log($(this).attr('id'));
    var id = $(this).attr('id');
    $(this).text("+");
    $('.rightSide01 .list-block.' + id).appendTo('.leftSide01');
})

---

演示：

您可以将此逻辑简化为一个同时适用于两个div的函数（如果只有两个div）

此代码开始时假设块位于左侧。它将

targetParent

值（即块将移动到的位置）设置到右侧，并将新链接文本设置为“-”

之后，它检查块是否实际位于右侧，如果位于右侧，则使用向左移动所需的值更新变量

此时，它将“move sym”

span

元素中的文本更新为最终的

linkText

值，并将其父块移动到新的目标div（targetParent值）

---

无需担心此函数中的委托或事件处理程序，因为函数是相同的，无论位置如何，并且将随“move sym”

span

元素一起移动，无论它移动到何处。

感谢您的教训）这是合乎逻辑的，现在我来谈谈事件委托）致以最良好的问候，谢谢您的输入。我知道有更好的方法来实现我的需求，但目前我需要快速而简单的决策。此外，可能存在多个这样的左/右块。无论如何，如果我有时间，我会尝试用你的例子创造更好的逻辑。不用担心。我这篇文章的主要观点是，你正在做很多额外的代码（其中一些甚至是重复的代码），这实际上可以用一组公共逻辑来完成。即使有两个以上的父div，您实际上只执行了一个常规行为的变体，因此您应该能够设置HTML和JS以使用单个函数来处理它。如果您需要帮助，请随时询问。：）嘿，塔勒敏，我最终得到了这个，因为我很快就需要它。）你能帮我把它弄得“漂亮”吗@我希望我能帮上忙。我的防火墙在工作时阻止了JSFIDLE，所以我现在无法访问您的代码。

//move form list blocks to different fields
$('.leftSide01').on('click', '.moveSym', function () {
    console.log($(this).attr('id'));
    var id = $(this).attr('id');
    $(this).text("-");
    $('.leftSide01 .list-block.' + id).appendTo('.rightSide01');
})
$('.rightSide01').on('click', '.moveSym', function () {
    console.log($(this).attr('id'));
    var id = $(this).attr('id');
    $(this).text("+");
    $('.rightSide01 .list-block.' + id).appendTo('.leftSide01');
})

$('.moveSym').click(function() {
    console.log($(this).attr('id'));  // I just left in, because you had it in the original code   :)

    var targetParent =  $(".rightSide01");
    var linkText = "-";

    if ($(this).parent(".rigthSide01") > 0) {
        linkText = "+";
        targetParent = $(".leftSide01");
    }

    $(this).text(linkText);
    $(this).parent().appendTo(targetParent);
});