javascript - jquery addclass、removeclass 和 appendTo

Question

我有一点问题，我正在尝试在一个 div 中找出一种选项，当点击时，追加到另一个 div，以防他们在另一个 div 中再次被点击他们会返回等等关于...这是我的代码:

    $(".selectable").bind('click', function(){
        $(this).removeClass("selectable").addClass("unselectable").appendTo('#selectableQuitar');
    });

    $(".unselectable").bind('click', function(){
    $(this).removeClass("unselectable").addClass("selectable").appendTo('#selectableAgregar');  
  });

我尝试了很多方法，当您单击第一个元素时，它会更改类并追加到下一个 div，恰恰相反……如果您检查元素它将显示新类，但不会触发点击事件……有什么想法吗？以防万一您需要更多信息，里面的 div 和元素:

<div id="pruebaSelectableAgregar">
<ol id="selectable" class="prueba">
  <li class="selectable">Item 1</li>
  <li class="selectable">Item 2</li>
  <li class="selectable">Item 3</li>
  <li class="selectable">Item 4</li>
  <li class="selectable">Item 5</li>
  <li class="selectable">Item 6</li>
</ol>
</div>

<div id="pruebaSelectableQuitar">
    <ol id="selectableQuitar">
        <li class="unselectable"> Prueba 1</li>
    </ol>
</div>

Answer 1

由于您要为注册了点击事件的元素动态添加和删除类，因此在这种情况下您必须使用事件委托(delegate)。

尝试，

$(document).on('click', '.selectable', function(){
    $(this).removeClass("selectable").addClass("unselectable").appendTo('#selectableQuitar');
});

$(document).on('click', '.unselectable', function(){
    $(this).removeClass("unselectable").addClass("selectable").appendTo('#selectableAgregar');  
});

此外，您可以使用 .toggleClass() 来简化您的代码，例如，

.toggleClass("selectable unselectable")