Question

我正在创建一个frombuilder，在选择一个选项值（从1到12）时，它会将一个col-xs-（1-12）类添加到div中。但是当我想选择其他选项来添加一些不同的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) ) { ... }

想要删除以前添加的类并将新类添加到同一个div

1 个答案: