Question

我正在尝试增加/减少元素类名中包含的数字。

让我们考虑一下这段代码：

<a href="#" class="increase">Increase</a>
<a href="#" class="decrease">Decrease</a>
<div id="my_div" class="large-12 columns">Div content</div>

我想实现这样的目标：

$('a.decrease').click(function(e){
    e.preventDefault();

    $('#my_div').decreaseClass('class^=large-'); 
    //decrease the number at the end of the class(es)
    //starting with the name "large-"
    //in this case large-12 would go to large-11
});

知道如何去做吗？

Answer 1

只需循环遍历您的课程并删除他们所在的课程并添加他们要去的课程。例如：

for (var i = 12; i > 1; i--) {
    $('#my_div .large-'+i).removeClass('large-'+i).addClass('large-'+(i-1));
}

#my_div是您正在执行此操作的div，large-是前缀。我假设如果你在大一号，你就会呆在那里。

Answer 2

更新答案

我改进了jQuery插件以改进其功能。我们有一个.alterClass()方法来增加/减少类的数量（通过step配置）：

;(function ($) {
    $.fn.alterClass = function (cls, opt) {
        opt = opt || {};
        var conf = $.extend({}, {
            'min': 1,  // min number of the class
            'max': 12, // max number of the class
            'step': 1  // increment/decrement step
        }, opt);

        return this.each(function () {
            var oldClass = $.grep(this.className.split(" "), function (v, i) {
                return v.indexOf(cls) === 0;
            }).join(),
                oldNum = Number(oldClass.split('-')[1]),
                newClass;

            oldNum += conf.step;

            if (conf.step > 0) { // increase mode
                newClass = cls + (oldNum <= conf.max ? oldNum : conf.max);
            } else { // decrease mode
                newClass = cls + (oldNum >= conf.min ? oldNum : conf.min);
            }

            if (! $(this).hasClass(newClass)) {
                $(this).removeClass(oldClass).addClass(newClass);
            }
        });
    };
}(jQuery));

您可以设置min和/或max号码以及step：

$('.increase').click(function(e) {
    e.preventDefault();
    $('#my_div').alterClass('large-', {'step': 1});
});

$('.decrease').click(function(e) {
    e.preventDefault();
    $('#my_div').alterClass('large-', {'step': -1});
});

以下是 UPDATED DEMO 。

原始答案

这是我尝试创建.decreaseClass()方法：

;(function($) {
    $.fn.decreaseClass = function(cls) {
        return this.each(function() {
            var oldClass = $.grep(this.className.split(" "), function(v, i){
                return v.indexOf(cls) === 0;
            }).join(),
                oldNum = oldClass.split('-')[1];
            $(this).removeClass(oldClass).addClass(cls+--oldNum);
        });
    };  
}(jQuery));

您可以按如下方式使用上述插件：

$('.decrease').click(function(e) {
    e.preventDefault();
    $('#my_div').decreaseClass('large-');
});

<强> WORKING DEMO

Answer 3

您正在寻找removeClass和addClass

removeClass支持函数，删除模式类非常容易。所以你可以这样做：

$('#my_div').removeClass(function(index, css) {
    return (css.match(/\blarge-\S+/g) || []).join(' ');
})

在你的情况下。

   var matchClass;
$('#my_div').removeClass(function (index, css) {
    matchClass = css.match(/\blarge-\S+/g);
    return (matchClass || []).join(' ');
});

matchClass=matchClass.map(function (item) {
    item = item.split("-");
    --item[item.length - 1];
    console.log(item);
    return item.join("-");

});


$('#my_div').addClass(matchClass.join(" "));

我做了一个例子jsfiddle

------------- ----------更新

如果您喜欢插件，可以这样：

(function () {
    $.fn.riseClass = function (prefix,direct) {
        var matchClass;
        return this.each(function () {
            $(this).removeClass(function (index, css) {
                var regex=RegExp('\\b'+prefix+'-\\S+', "g");

                matchClass = css.match(regex);
                return (matchClass || []).join(' ');
            });

            matchClass = matchClass.map(function (item) {
                item = item.split("-");
                if (direct == "down") {
                    item[item.length - 1]--;
                } else {
                    item[item.length - 1]++;
                }

                return item.join("-");

            });

            $(this).addClass(matchClass.join(" "));

        });

    };
})();

检查jsfiddle：plugin version

以编程方式更改类名

3 个答案:

更新答案

原始答案