Javascript jquery ui可选添加/删除选中/未选中的类

使用jquery ui Selective，如何在

selected/selecting

事件上添加自定义类，并在

unselected/unselecting

我知道我们可以使用CSS进行样式选择：

.ui selected{}

，但如果我想添加自定义类，如

ui state focus

，这将毫无帮助

试试看，你可以用我的小提琴。。

---

在本例中，我想添加/删除选中/未选中的

ui状态焦点

类

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

• 选择

• 已选择

• 取消选择

• 未选中

添加/删除自定义类

假设您有

classA

用于“选择”，而

classB

用于“选择”。您的可选择项应按如下方式创建：

$(".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');
    }
});

---

应用于您的小提琴：

您可以添加jquery脚本作为一个函数，就像我们在javascript中所做的那样。 使用onclick事件 例如，您希望在下面的div中添加或删除类

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

这样做的好处是，您也可以将此函数用于其他元素

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