Question

我试图找出一个更优雅的解决方案。但到目前为止，我的jquery技能有限。

我想有更好的方法来实现下面的功能。用几句话说。我试图在点击时更改父级的背景。

现在，我只需添加一个类，并从其他按钮中删除其他可能的类。

相关HTML：

<div class="panel panel-widget widget-latest-posts">
                <div class="panel-heading">
                    <h3 class="widget-title">Ebenfalls lesenswert</h3>
                </div>

                <div class="panel-body">
                    <div class="btn-pref btn-group btn-group-justified btn-group" role="group" aria-label="...">
                            <div class="btn-group" role="group">
                                <button type="button" id="btn-popular-posts" class="btn btn-popular-posts" href="#tab1" data-toggle="tab"><i class="fa fa-fire"></i>
                                    <span class="hidden-xs">Beliebt</span>
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button type="button" id="btn-latest-posts" class="btn btn-latest-posts" href="#tab2" data-toggle="tab"><i class="fa fa-clock-o"></i>
                                    <span class="hidden-xs">Neu</span>
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button type="button" id="btn-popular-comments" class="btn btn-popular-comments" href="#tab3" data-toggle="tab"><i class="fa fa-commenting-o"></i>
                                    <span class="hidden-xs">Aktiv</span>
                                </button>
                            </div>
                        </div>

相关CSS：

.bpp-toggled {
    background: orange !important;
}
.blp-toggled {
    background: lime !important;
}
.bpc-toggled {
    background: purple !important;
}

Jquery

$("#btn-popular-posts").click(function() {

    $('.widget-latest-posts').addClass('bpp-toggled');
    $('.widget-latest-posts').removeClass('blp-toggled');
    $('.widget-latest-posts').removeClass('bpc-toggled');
});

$("#btn-latest-posts").click(function() {

    $('.widget-latest-posts').addClass('blp-toggled');
    $('.widget-latest-posts').removeClass('bpp-toggled');
    $('.widget-latest-posts').removeClass('bpc-toggled');
});

$("#btn-popular-comments").click(function() {

    $('.widget-latest-posts').addClass('bpc-toggled');
    $('.widget-latest-posts').removeClass('blp-toggled');
    $('.widget-latest-posts').removeClass('bpp-toggled');
});

你能帮我解决一个更优雅的解决方案，或者关键词我可以做一些研究。因为现在，由于我会添加更多按钮，因此很难维护。

感谢您的帮助！

编辑：我知道toggleClass。但那种情况并没有成功。因为它只是在第二次点击时删除了该课程。

Answer 1

这只是使用数据属性来保持按钮本身的类。您还可以在removeClass中使用带有正则表达式的函数来删除初始切换类，然后再应用新类。

将来添加按钮时，您只需要确保按钮具有正确的data-target-class属性，并在css中设置正确的类。只要遵循一致的命名约定，就不需要对javascript进行任何更改。

$("button[data-toggle='tab']").click(function() {
    $('.widget-latest-posts').removeClass(function (index, className) {
      return (className.match (/([a-z]{3,3})-toggled/g) || []).join(' ');
    }
  );
  $('.widget-latest-posts').addClass($(this).attr("data-toggled-class"));
});

.bpp-toggled {
    background: orange !important;
}
.blp-toggled {
    background: lime !important;
}
.bpc-toggled {
    background: purple !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-widget widget-latest-posts">
<div class="panel-heading">
<h3 class="widget-title">Ebenfalls lesenswert</h3>
</div>

<div class="panel-body">
<div class="btn-pref btn-group btn-group-justified btn-group" role="group" aria-label="...">
    <div class="btn-group" role="group">
        <button type="button" id="btn-popular-posts" class="btn btn-popular-posts" href="#tab1" data-toggle="tab" data-toggled-class="bpp-toggled"><i class="fa fa-fire"></i>
            <span class="hidden-xs">Beliebt</span>
        </button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" id="btn-latest-posts" class="btn btn-latest-posts" href="#tab2" data-toggle="tab" data-toggled-class="blp-toggled"><i class="fa fa-clock-o"></i>
            <span class="hidden-xs">Neu</span>
        </button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" id="btn-popular-comments" class="btn btn-popular-comments" href="#tab3" data-toggle="tab" data-toggled-class="bpc-toggled"><i class="fa fa-commenting-o"></i>
            <span class="hidden-xs">Aktiv</span>
        </button>
    </div>
</div>

Bootstrap选项卡更改父背景Jquery

1 个答案: