Question

使用jquery ui selectable，如何在selected/selecting事件上添加自定义类并在unselected/unselecting上删除

我知道我们可以使用CSS进行样式选择：.ui-selected{}但如果我想添加自定义类ui-state-focus，这个deosnt会有所帮助。

对于Try，你可以使用我的小提琴。http://jsfiddle.net/bababalcksheep/CjT3r/2/。在此示例中，我想在选定/未选定的

上添加/删除ui-state-focus类

Answer 1

如果您对使用JavaScript感到满意，可以通过处理事件来完成：

selecting
selected
unselecting
unselected

添加/删除自定义类。

假设您有classA用于“选择”而classB用于“已选择”。您的selectable应该像这样创建：

$(".ui-splitselect-list").selectable({
    cancel: ".ui-splitselect-item .ui-splitselect-handle-drag",
    selecting: function (event, ui) {
        $(ui.selecting).addClass('classA');
    },
    unselecting: function (event, ui) {
        $(ui.unselecting).removeClass('classA');
    },
    selected: function (event, ui) {
        $(ui.selected).addClass('classB');
    },
    unselected: function (event, ui) {
        $(ui.unselected).removeClass('classB');
    }
});

适用于你的小提琴：http://jsfiddle.net/CjT3r/4/

Answer 2

你添加jquery脚本就像我们在javascript中所做的那样。使用onclick事件例如，你想在下面的div中添加或删除类

<div id="divExample" class="normalstyle" onclick="ChangeClass(this)">example text</div>

你为这个

写了一个jquery函数

function ChangeClass(divid){
$(divid).removeClass('normalStyle');
$(divid).addClass('selectedStyle');
}

这样做的好处是你也可以将此功能用于其他元素

jquery ui可选择在选定/未选中时添加/删除类

2 个答案: