2

我有几个按钮。单击时，我想从我的文本字段中删除所有类。
目前这就是我所拥有的，但代码没有优化。

var maintextarea = $('.myTextArea');
$('#styleBtn1').click(function(){
    maintextarea.removeClass('fromStyleBtn2 fromStyleBtn3');
    maintextarea.addClass('fromStyleBtn1');
    return false;
});
$('#styleBtn2').click(function(){
    maintextarea.removeClass('fromStyleBtn1 fromStyleBtn3');
    maintextarea.addClass('fromStyleBtn2');
    return false;
});
$('#styleBtn3').click(function(){
    maintextarea.removeClass('fromStyleBtn1 fromStyleBtn2');
    maintextarea.addClass('fromStyleBtn3');
    return false;
});


问题：如何重写该removeClass部分，以便在单击按钮时所有以前的类都将被清空并添加我的类？

4

4 回答 4

1

在这里，直接来自.removeClass() 的 jQuery 文档：

要将所有现有类替换为另一个类，我们可以使用 .attr('class', 'newClass')

于 2012-05-27T01:31:36.590 回答
1

您可以简单地使用方法链接

maintextarea.removeClass().addClass('fromStyleBtn1');

不带任何参数调用 removeClass() 将删除所有类。

编辑：您的整个代码可以像这种通用形式一样替换。假设您的类名将始终采用“from”+elementID 格式。（例如：来自StyleBtn2）

var maintextarea = $('.myTextArea'); 
$('.fromStyleBtn1,.fromStyleBtn2,.fromStyleBtn3').click(function(){
    var item=$(this);
    var newClassName="from"+item.attr("id");
    maintextarea.removeClass().addClass(newClassName);
    return false;
});
于 2012-05-27T01:35:35.633 回答
1

如果您确实想删除类属性而不是某些属性值，请使用removeAttr()。

于 2012-05-27T01:35:39.393 回答
1

您可以像这样覆盖 removeClass 的功能：

$(function() {
    var originalRemoveClass=$.fn.removeClass;

    $.fn.extend({
        removeClass:function(toRemove, toAdd) {
            originalRemoveClass.call(this, toRemove);
            this.addClass(toAdd);            
        }
    });
});

你可以在这里看到一个例子：http: //jsfiddle.net/NuGdM/1/
另一种选择是创建你的插件来做到这一点（如果你需要一个例子 - 问我）。
祝你好运！

于 2012-05-27T01:38:31.747 回答