Question

这是我的现场演示：https://jsfiddle.net/johndoe1992/3uqg7y9L/

当我点击左侧面板上的某个按钮时，必须将其克隆到右侧面板（参见现场演示）
必须在左侧面板上点击此按钮时添加bootstrap类'disable'。我们左侧是禁用按钮，右侧是启用按钮
当我点击右侧面板上的某个按钮时，它必须重新定位回左侧面板（参见现场演示）

左边是启用按钮，右边没有按钮

我试图找到一个使用它的解决方案，适用于＃1和＃2，但我不知道如何处理＃3

$(this).clone().appendTo('.selected');
$(this).prop('disabled', true);

感谢您的帮助

Answer 1

首先，您需要使用委托事件处理程序来处理动态添加到.selected div的按钮的点击次数。

其次，您需要添加一种方法来识别.selected div中单击了哪个按钮，并将其与.base div中的原始按钮相匹配。为此，您可以使用data属性。从那里你可以设置disabled属性状态和remove()克隆。像这样：

<div class="base">
    <button type="button" class="btn btn-default" data-state="default">Text 1</button>
    <button type="button" class="btn btn-primary" data-state="primary">Text 2</button>
    <button type="button" class="btn btn-info" data-state="info">Text 3</button>
    <button type="button" class="btn btn-warning" data-state="warning">Text 4</button>
    <button type="button" class="btn btn-success" data-state="success">Text 5</button>
    <button type="button" class="btn btn-danger" data-state="danger">Text 6</button>
</div>
<div class="selected"></div>

$(document).on('click', '.btn', function() {
    if($(this).parent().attr("class") == "base") {
        $(this).clone().appendTo('.selected');
        $(this).prop('disabled', true);
    }
    else {
        $('.base').find('[data-state="' + $(this).data('state') + '"]').prop('disabled', false);
        $(this).remove();
    }
});

Updated fiddle

将元素从一个div移动到另一个div

1 个答案: