2

我有以下 DOM 元素：

<div id="container">
    <ul class="block-grid three-up">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
    </ul>
</div>

我想要做的是让 ul 有一个类来说明哪个 li 被悬停在上面。到目前为止，我有：

$('#container li').hover(function() {
        i = $(this).index() + 1;
        // need function to remove all classes that start with n- here
        $('#container ul').addClass('n-'+i);
        $(this).addClass('active');
    }, function() {
        // need function to remove all classes that start with n- here
        $(this).removeClass('active');
    }
);

我需要找到一种方法来删除所有以 n- 开头的类，因为现在编写代码，它只是向 ul 添加和添加类。我不能简单地删除所有其他类，因为出于结构原因我需要其他类。而且我知道没有办法在 removeClasses 中使用通配符。我可以在这里使用某种正则表达式吗？

4

2 回答 2

5

为了回答这个问题，只是为了好玩，这里有一个插件，它根据类的开头删除类：

$.fn.removeClassStartsWith = function(param) {
    return this.each(function() {
        var classes = this.className.split(/\s+/g),
            newclasses = [];

        $.each(classes, function(_,klass) {
            if ( $.trim(klass).indexOf(param) !== 0 ) 
               newclasses.push($.trim(klass));
        });

        this.className = newclasses.join(' ');
    });
}

被称为：

$('elements').removeClassStartsWith('n-');

小提琴

于 2013-06-21T19:56:31.953 回答
2

在没有正则表达式的情况下我可以想到的一种方法是将当前类存储在一个变量中，然后将其删除。

var prev;
$('#container li').hover(function () {
    var i = $(this).index() + 1;
        prev = `n-` + i;
    $('#container ul').addClass(prev);
    $(this).addClass('active');
}, function () {
    i = $(this).index() + 1;
    $(this).removeClass('active');
    $('#container ul').removeClass(prev);
});

检查小提琴

但正如评论所建议的那样，这样做是一种不好的做法。

于 2013-06-21T19:51:12.687 回答