3

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

我知道我们可以使用 CSS 进行样式选择：.ui-selected{}但是如果我想添加自定义类，例如ui-state-focus.

对于 Try，你可以使用我的 Fiddle。http://jsfiddle.net/bababalcksheep/CjT3r/2/。在这个例子中，我想ui-state-focus在选中/取消选中添加/删除类

4

2 回答 2

4

如果您对使用 JavaScript 感到满意，您可以通过处理事件来做到这一点：

  • selecting
  • selected
  • unselecting
  • unselected

添加/删除您的自定义类。

假设您有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');
    }
});

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

于 2013-10-30T08:40:27.203 回答
0

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

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

你acn为此写了一个jquery函数

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

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

于 2013-10-30T08:42:30.640 回答