Изменение цвета фона на вкладке серии в Javascript - PullRequest
Новая
       2

Изменение цвета фона на вкладке серии в Javascript

0 голосов
/ 14 октября 2019

Я работаю над приложением, и на веб-интерфейсе у меня есть несколько пользовательских вкладок, которые я хочу, когда на одной из них нажимают, я фиксирую текст на вкладке, например, в стационарном режиме, и цвет фона меняется после того, как значение зафиксировано.

Моя цель - чтобы я нажимал одну вкладку за раз. Как правило, цвет фона текущей выбранной вкладки должен измениться, и значение будет зафиксировано (текст на вкладке), в то время как цвет фона предыдущей нажатой вкладки вернется в исходное состояние.

Код разметки 

<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");
    }
});

Ответы [ 2 ]

2 голосов
/ 14 октября 2019

Сброс цвета всех преимуществ до значения по умолчанию, а затем установка значения элемента, по которому щелкнули, должны работать. 

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>
0 голосов
/ 14 октября 2019

Вы можете изменить свой JavaScript ниже. Он устанавливает для всех элементов с классом "преимущество" их цвет и цвет фона по умолчанию, а затем изменяет элемент, на который щелкнули, на новый цвет и цвет фона: 

$(".benefit").click(function () {
    // reset old values
    $('.benefit').css("color", "");
    $('.benefit').css("background-color", "");
    // update clicked element
    $(this).css("color", "gray");
    $(this).css("background-color", "#d6d2c5");
});

Достигает ли это того, что вы ищете?

https://jsfiddle.net/52aL6wzd/

...