Jquery Переключение между элементами

Question

У меня есть 2 элемента, привилегии и звания, при нажатии на одно из двух у них появляется задний фон (по умолчанию стоят привилегии), но мне нужно что бы при нажатии к примеру на 2 элемент, у 1 элемента удалялся задний фон. Как это сделать? Вот код

HTML:

<div class="shop-content__body">
    <div class="shop-content__body-select shop-content__body-default">
        <h2>Привелегия</h2>
    </div>
    <div class="shop-content__body-select">
        <h2>Звание</h2>
    </div>
</div>

JQUERY:

let priv = $('.shop-content__body-select')

$('.shop-content__body-default').addClass('active');

priv.on('click', function(){
        
    $(this).toggleClass('active');
        
    let privFirst = $('.shop-content__body-default');
    let privLast = $('.shop-content__body-two');

    if(privFirst.hasClass('active')){
        privFirst.removeClass('active');
    }else if(privLast.hasClass('active')){
        privLast.removeClass('active');
    }

});

Answer 1

Просто по клику удаляем класс active у всех элементов с целевым классом и выставляем класс active у того, по которому кликнули.

let shopContentSelector = '.shop-content__body-select';
let $shopContent = $(shopContentSelector)

$('.shop-content__body-default').addClass('active');

$shopContent.on('click', function(){
    $shopContent.removeClass('active');    
    $(this).addClass('active');
    
    // ... Какой-то ещё код    
});

.active {
    background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="shop-content__body">
    <div class="shop-content__body-select shop-content__body-default">
        <h2>Привелегия</h2>
    </div>
    <div class="shop-content__body-select">
        <h2>Звание</h2>
    </div>
</div>

Answer 2

$('.shop-content__body-default h2').addClass('active');
$('.shop-content__body').on('click', '.shop-content__body-select h2', function(ev) {
  $('.shop-content__body-select h2').removeClass('active');
  $(ev.target).addClass('active');
});

.active { background-color: yellow; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shop-content__body">
  <div class="shop-content__body-select shop-content__body-default">
    <h2>Привелегия</h2>
  </div>
  <div class="shop-content__body-select">
    <h2>Звание</h2>
  </div>
  <div class="shop-content__body-select">
    <h2>Рейтинг</h2>
  </div>
</div>

Answer 3

Слоган JQuery: Пиши меньше, делай больше!

$('.shop-content__body-select').on('click', function() {
  $(this).addClass('active').siblings().removeClass('active');
}).first().addClass('active');

.active {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shop-content__body">
  <div class="shop-content__body-select shop-content__body-default">
    <h2>Привелегия</h2>
  </div>
  <div class="shop-content__body-select">
    <h2>Звание</h2>
  </div>
</div>

БЛОГ НА HUSL

Jquery Переключение между элементами

Ответы (3 шт):