javascript - jQuery中的智能切换类 | jQuery中的智能切换类

我正在尝试实现一个脚本，以在特定元素上设置不同的类名称。

假设dom看起来像这样:

<body class='pre-existing-class-name'>

如果我做

smartToogle('body', 'new-class');
// the dom should look like this
// <body class='pre-existing-class-name new-class'>
smartToogle('body', 'new-class-2');
// the dom should look like this
// <body class='pre-existing-class-name new-class-2'>

我做了下面的代码，但是没有用:

var smartToogle = function (element, newClassName) {
    var oldClassName;
    var $element = $(element);

    $element.addClass(newClassName);
    if (oldClassName !== newClassName) {
        $element.removeClass(oldClassName);
    }
    oldClassName = newClassName;
};

要求:
1)我正在使用查询
2)我只想传递一个新的类(class)名称。

解决方案:
以下代码有效，但我不喜欢它，因为它使用了全局变量。
有任何修复建议吗？

function myToggle(newClassName) {
    if (window.oldClassName) {
         $('body').toggleClass(window.oldClassName);
    }
    window.oldClassName = newClassName;
    $('body').toggleClass(newClassName);
}

最佳答案

您可以为元素使用data属性，该属性可以使用

$(element).data(attrib_name)

您的方法只需要很小的变化

function myToggle(newClassName) {
    if (window.oldClassName) {
         $('body').toggleClass(window.oldClassName);
    }
    window.oldClassName = newClassName;
    $('body').toggleClass(newClassName);
}

可以替换为

function myToggle(element, newClassName) {
    if ($(element).data('oldClassName')) {
         $(element).toggleClass($(element).data('oldClassName'));
    }
    $(element).data('oldClassName', newClassName)
    $(element).toggleClass(newClassName);
}

希望这能为您解决。

关于javascript - jQuery中的智能切换类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12910216/