javascript - 更改部分属性

Question

我有弹出窗口，我可以在其中按属性更改图标:

$(this).attr('class', popup.find('i').attr('icon-class'));

以及该元素的 html:

<i class="small icon-adjustments"></i>

但是你可以看到我有两个类小和图标调整改变。

问题是当我更改类时，我的脚本也会删除 small 类。我怎样才能只改变类(class)的第二部分？

Answer 1

更改部分 className 属性的最简单方法可能是使用 jQuery:

$(this).removeClass('icon-adjustments').addClass('new-class-name')

<小时/>

但还有一些其他方法。

例如，您可以使用替换:

this.className.replace('icon-adjustments', 'new-class-name')

或者用空格分割className属性，然后替换第n个元素:

var names = this.className.split(' ')
names[1] = 'new-class-name'
this.className = names.join(' ')

如果您只想删除类名的一部分，只需传递一个空字符串即可。

抽象此代码的方法可能如下所示:

function replaceClass(element, oldClass, newClass) {
    var names = element.className.split(' ')
    var i, len;

    for (i = 0, len = names.length; i < len; i++) {
        if (names[i] === oldClass) {
            names[i] = newClass;
        }
    }

    element.className = names.join(' ')
}

http://jsfiddle.net/w3hL0h9d/