Question

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

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

如果点击一下 + 整个块移动到其他div。一切正常但只能将ech块移动到另一个div一次，但我需要他们双向.moveSym点击。

我的JS

    //remove block on click
$('.del-block').on('click', function() {
    var block = $(this).attr('id');
    $('.' + block).remove();
})

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

我知道有插件可供使用，但我真的想自己编写并学习:) 小提琴http://jsfiddle.net/A1ex5andr/CRvVK/

Answer 1

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

//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');
})

演示：Fiddle

Answer 2

你真的可以将这个逻辑简化为一个适用于两者的函数（如果只有两个div）。。

$('.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);
});

此代码首先假设该块位于左侧。。。它将targetParent值（即块移动到的位置）设置到右侧，新链接文本设置为“ - ”。

之后，它会检查块是否实际位于右侧，相反，如果是，则它会使用将其移动到左侧所需的值来更新变量。

此时，它将“move-sym”span元素中的文本更新为最终linkText值，并将其父块移动到新的目标div（{{1} } value）。

无需担心这个中的委托或事件处理程序，因为无论位置如何，函数都是相同的，并且随着“move-sym”targetParent元素移动，无论它在哪里。

在两个div之间移动块

2 个答案: