Question

好吧所以我正在尝试使用jQuery和bootstrap创建一个PHP页面构建器。

除了能够看到列大小的变化外，几乎所有工作都有效。

我的问题是我不知道如何替换列大小类变量，它可以是col-lg-1到col-lg-12之间的任何内容

所以使用jquery我希望能够做到以下几点。

根据类获取当前列大小：因此，如果列为col-lg-4，我想获得4
根据用户选择的方向将3替换为3或5。
删除课程col-lg-4并添加课程col-lg-3或col-lg-5

这种方式在屏幕上，用户可以看到该列的大小。

提供更多信息。这是HTML

<div class="col-lg-4 bs-example-popover">
    <div class="popover" style="width:100%;">
        <h3 class="popover-title">[Module Title] <button type="button" class="close">&times;</button></h3>
        <div class="popover-content">
            <p>[Module Description]</p>
            <ul class="list-unstyled">
                <li class="pull-right"><button class="btn btn-default btn-xs"><span class="icon-icomoon-arrow-right"></span></button></li>
                <li class="pull-right">&nbsp;</li>
                <li class="pull-right"><button class="btn btn-default btn-xs"><span class="icon-icomoon-arrow-left"></span></button></li>
                <li>&nbsp;</li>
            </ul>
        </div>
    </div>
</div><!-- /column -->

我的基本JS将获得父级和按钮。但我不知道如何获得类的大小，然后加或减，最后替换类。

$('.page-builder-column ul li .btn').on('click', function(e) {
    e.preventDefault();
    var _btn = $(this).find('span'),
        _parent = $(this).parents().eq(4);
    if (_btn.hasClass('icon-icomoon-arrow-right')) {
        console.log('larger');
    }else{
        console.log('smaller');
    }
    console.log(_parent.hasClass('col-lg-*'));
});

Answer 1

您可以执行以下操作：

_parent.attr('class').match(/\d+/)[0]

将返回4

替换没有完整类名的类名

1 个答案: