Question

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

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部分，以便在点击按钮时，所有以前的课程都将被取消，我的课程会被添加？

Answer 1

您可以直接从jQuery documentation for .removeClass()：

开始

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

Answer 2

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

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

调用不带任何参数的removeClass（）将删除所有类。

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

var maintextarea = $('.myTextArea'); 
$('.fromStyleBtn1,.fromStyleBtn2,.fromStyleBtn3').click(function(){
    var item=$(this);
    var newClassName="from"+item.attr("id");
    maintextarea.removeClass().addClass(newClassName);
    return false;
});

Answer 3

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

Answer 4

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

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

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

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

jQuery在点击时删除所有类

4 个答案: