javascript - 更改 Javascript 中一系列选项卡的背景颜色

Question

我正在开发一个应用程序，在前端我有一些自定义选项卡，当单击其中一个选项卡时，我会捕获选项卡上的文本，例如住院病人，并且背景颜色在捕获值后发生变化。

我的目标是我希望一次单击一个选项卡。基本上， 当前单击的选项卡的背景颜色应该改变 以及先前单击的选项卡背景颜色时捕获的值(选项卡上的文本) 恢复到原来的状态。

标记代码

<div class="row">
    <div class="col-11 mx-auto d-flex jbiz-plans">
        <div class="col flex-fill benefit text-center">
        <img src="{{ asset('images/care.png')}}">  <br>
            Inpatient
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Outpatient
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Dental
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Optical
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Maternity
        </div>
    </div>
</div>

我正在使用的 JavaScript 逻辑

let bgColor = false;
$(".benefit").click(function () {
    if (bgColor = !bgColor) {
        $(this).css("background-color", "#ba0c2f");
        $(this).css("color", "#fff");
        //alert($(this).text());
    } else {
        $(this).css("background-color", "#d6d2c5");
        $(this).css("color", "gray");
    }
});

Answer 1

将所有好处的颜色重置为默认值，然后设置单击元素的值应该可以工作。

let bgColor = false;
$(".benefit").click(function () {
    $('.benefit').css("background-color", "");
    $('.benefit').css("color", "");
    if (bgColor = !bgColor) {
        $(this).css("background-color", "#ba0c2f");
        $(this).css("color", "#fff");
    } else {
        $(this).css("background-color", "#d6d2c5");
        $(this).css("color", "gray");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <div class="col-11 mx-auto d-flex jbiz-plans">
        <div class="col flex-fill benefit text-center">
        <img src="{{ asset('images/care.png')}}">  <br>
            Inpatient
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Outpatient
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Dental
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Optical
        </div>
        <div class="col ml-1 flex-fill benefit text-center">
            <img src="{{ asset('images/care.png')}}">  <br>
            Maternity
        </div>
    </div>
</div>