Как правильно добавлять и удалять стили по нажатию одной кнопки?

Рейтинг: 0Ответов: 1Опубликовано: 03.08.2023

Хочу сделать чтобы показывало и скрывало 2 разных блока типо переключателя, решил сделать так чтобы добавляла стиль и убирало стиль, но почему то неработает. Взял с примера там все прекрасно работало

<script>
const part = '.acti';
const part_active = 'part_active';
const button = '.switch';

$(button).on('click', function() {
  $(this).parent(part).removeClass(part_active);
  var next = $(this).parent(part).next(part);
  if (next.length == 0)
    next = $(this).closest('.overs').find('.acti').eq(0);
  next.addClass(part_active);
});
</script>



   <div class="overs">
                    <div class="object_search">
<input type="text" id="object_search" placeholder="Поиск по названию"><button ></button>
<div class="checked">   
<span class="ttt">На карте</span>       
    <label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>
<span class="ddd">Списком</span>
</div>
    </div>
    
        <div class="acti" id="map"></div>
<div class="acti list-titles">
<?php  
    $pp='';
    foreach ($metadata as &$value) {
        
    $pp.='<div class="list-title">'.$value["title"].'</div>';
} 
    $pp.='';        
    echo $pp;       
            ?>
</div>  </div>
javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 0

Повесь id для каждого объекта и станет все проще

<div>
    <div id="change_styles1" class="style1"></div>
    <div id="change_styles2" class="style2"></div>
    <button id="change">Переключить</button>
</div>

Тогда JQuery код будет выглядеть так:

$("#change").click(function () {
    // убирает стиль 1 и добавляет стиль 2 (в данном контексте стиль = класс)
    $("#change_styles1").toggleClass("style1").toggleClass("style2"); 
    $("#change_styles2").toggleClass("style1").toggleClass("style2");
})