4

好的，所以我正在尝试使用 jQuery 和 bootstrap 制作一个 PHP 页面构建器。

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

我的问题是我不确定如何替换列大小类变量，它可能col-lg-1介于col-lg-12

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

  1. 根据类获取当前列大小：所以如果列是col-lg-4我想获得 4
  2. 根据用户选择的方向将 4 替换为 3 或 5。
  3. 删除类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-*'));
});
4

1 回答 1

1

您可以执行以下操作：

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

这将返回4

于 2013-08-10T21:58:49.130 回答