jQuery UI Selectable - 单击时取消选择所选项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3946462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Selectable - unselect selected item on click
提问by fehays
Does anyone know if there's a way to configure a jquery ui selectable element to unselect the selected element when you click it? Sort of like a toggle. If it's already selected, unselect it, otherwise do the default behavior.
有谁知道是否有办法配置 jquery ui 可选元素以在单击时取消选择所选元素？有点像一个开关。如果它已经被选中，取消选中它，否则执行默认行为。
Thanks.
谢谢。
回答by Keith Socheath Chea
i'm very late in responding to your question, but let me just answer it anyway so that to keep it as a reference for others.
我回答你的问题很晚，但还是让我回答一下，以便将其作为其他人的参考。
$( ".selector" ).bind( "mousedown", function ( e ) {
e.metaKey = true;
} ).selectable();
this will allow the toggle behavior that you're looking for.
这将允许您正在寻找的切换行为。
回答by fehays
Well here's what I just ended up doing. I used a class name to toggle selecting and unselecting. I'd love to hear if there is another option:
嗯，这就是我刚刚结束的工作。我使用了一个类名来切换选择和取消选择。我很想知道是否还有其他选择：
$("#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');
}
});
回答by Rashed Alee
If you want that existing selections be preserved and yet have the toggle operation, you simply need to ignore the unselected event for the solution given. Also you need to remove the ui-selected class.
如果您希望保留现有选择并进行切换操作，您只需忽略给定解决方案的未选择事件。您还需要删除 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
}
}
});
回答by Trufa
Is this what you mean?
你是这个意思吗？
This event is triggered at the end of the select operation, on each element removed from the selection.
此事件在选择操作结束时触发，针对从选择中移除的每个元素。
Code examples
代码示例
Supply a callback function to handle the unselected event as an init option.
提供一个回调函数来处理未选择的事件作为 init 选项。
$( ".selector" ).selectable({
unselected: function(event, ui) { ... }
});
Bind to the unselected event by type: selectableunselected.
$( ".selector" ).bind( "selectableunselected", function(event, ui) {
...
});
Source:
来源：
