javascript - 以编程方式更改类名

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

更新的答案

我改进了 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 .