jQuery UI Selectable - 单击时取消选择所选项目答案

【问题标题】：jQuery UI Selectable - unselect selected item on clickjQuery UI Selectable - 单击时取消选择所选项目
【发布时间】：2011-04-26 04:16:04
【问题描述】：

有谁知道是否有一种方法可以配置 jquery ui 可选元素以在单击时取消选择选定元素？有点像拨动开关。如果它已被选中，请取消选中它，否则执行默认行为。

谢谢。

【问题讨论】：

标签： jquery jquery-ui selectable jquery-ui-selectable unselect

【解决方案1】：

我很晚才回复你的问题，但还是让我回答一下吧，以供其他人参考。

$( ".selector" ).bind( "mousedown", function ( e ) {
    e.metaKey = true;
} ).selectable();

这将允许您正在寻找的切换行为。

【讨论】：

我看到它按预期工作，但老实说，我不明白如何！你能解释一下为什么这段代码有效吗（我的意思是第二次点击时它是如何取消选择的？）
这只是将元键 (Ctrl) 添加到“mousedown”事件，这会强制执行与您自己按下 Ctrl 相同的行为。

【解决方案2】：

这就是我刚刚完成的工作。我使用类名来切换选择和取消选择。我很想知道是否有其他选择：

$("#selectable").selectable({
    selected: function (event, ui) {
        if ($(ui.selected).hasClass('selectedfilter')) {
            $(ui.selected).removeClass('selectedfilter');
            // do unselected stuff
        } else {            
            $(ui.selected).addClass('selectedfilter');
            // do selected stuff
        }
    },
    unselected: function (event, ui) {
        $(ui.unselected).removeClass('selectedfilter');
    }
});

【讨论】：

啊，好吧，我明白你的意思了！对不起！
没问题@Trufa。我确定我没有很好地解释它。感谢您提供帮助。
请注意，为了切换类名，您可以简单地使用 'toggleClass("selectedFilter")'。无需检查元素是否具有类。 ToggleClass 会为您做到这一点。

【解决方案3】：

如果您希望保留现有的选择并进行切换操作，您只需忽略给定解决方案的未选择事件。您还需要删除 ui-selected 类。

$("#selectable").selectable({
selected: function (event, ui) {
    if ($(ui.selected).hasClass('selectedfilter')) {
        $(ui.selected).removeClass('selectedfilter').removeClass('ui-selected');
        // do unselected stuff
    } else {            
        $(ui.selected).addClass('selectedfilter').addClass('ui-selected');
        // do selected stuff
    }
}
});

【讨论】：

【解决方案4】：

这是你的意思吗？

此事件在选择操作结束时触发，在从选择中删除的每个元素上。

代码示例

提供一个回调函数来处理未选择的事件作为初始化选项。

$( ".selector" ).selectable({
   unselected: function(event, ui) { ... }
});
Bind to the unselected event by type: selectableunselected.
$( ".selector" ).bind( "selectableunselected", function(event, ui) {
  ...
});

来源：

http://jqueryui.com/demos/selectable/#event-unselected

【讨论】：

好吧，我需要的是在单击选定元素时触发此未选定事件。现在，只有当我单击另一个可选元素时才会触发此事件。