想要删除以前添加的类并向同一div添加新类

Question

我正在制作一个frombuilder，其中在选择一个选项值（从1到12）时，它向div添加了col-xs-（1-12）类。 但是，当我想选择其他选项来添加一些不同的col-xs-（1-12）类时，不会删除先前的类。

function addGrid() {
    console.log("addGrid Called !");
    console.log($(".grid_cols").val());
    var col_val = $(".grid_cols").val();
    console.log("col_val :" + col_val - 1);
    if ($(".fb-field-wrapper").find('col-xs' + '-' + col_val)) {
        console.log("hasClass ??");
        $(".fb-field-wrapper").removeClass('col-xs' + '-' + col_val);
        console.log("removed class");
    }
    else {
        $(".fb-field-wrapper").addClass('col-xs' + '-' + col_val);
    }

}

Answer 1

您还可以：

• 使用一点正则表达式查看模式col-xs-<num>存在
• 如果是，将其删除
• 添加新课程

这是您的代码，经过上述几点简化。

function addGrid() {

    var col_val = $(".grid_cols").val(),
        $wrapper = $(".fb-field-wrapper"),
        matches = $wrapper.attr("class").match(/col-xs-(\d+)/i);

    //See if class 'col-xs-<num>' exists
    if (matches !== null) {
        //If yes, remove that class
        $wrapper.removeClass("col-xs-" + matches[1]);
    }
    //Add Class
    $wrapper.addClass('col-xs' + '-' + col_val);
}

注：在你的代码中， $(".fb-field-wrapper").find('col-xs' + '-' + col_val)将试图找到的孩子.fb-field-wrapper带班col-xs-<num>而您想查看包装器本身中是否存在该类。 为此，您可以这样做：

if ( $(".fb-field-wrapper").hasClass('col-xs-' + col_val) ) { ... }