jQuery UI 可选择在选定/未选定时添加/删除类

jquery ui selectable add/remove class on selected/unselected

本文关键字：定时 添加 删除 UI 可选择 jQuery      更新时间：2023-09-26

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

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

对于Try，您可以使用我的Fiddle.http：//jsfiddle.net/bababalcksheep/CjT3r/2/。在此示例中，我想在选定/未选定时添加/删除ui-state-focus类

如果你对使用 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/

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

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

你可以为此编写一个 jquery 函数

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

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

相关文章：