Как добавить класс при клике на jquery?

Question

[Clay]

Есть две кнопки и два контента в div

<button class="btn" data-id="1">Кнопка 1</button>
<button class="btn" data-id="2">Кнопка 1</button>
<div class="content" data-content="1">Контент 1</div>
<div class="content" data-content="2">Контент 1</div>

Как реализовать, чтобы при клике на кнопку 1 добавлялся класс active-btn этой же кнопке и добавлялся класс active-content диву контент 1, а у другой кнопки и другого контента соответственно удалялись эти классы.
Все это должно реализовываться через data и на jquery
Заранее благодарен

Comments

[Николай]

Что не получается? Выложите код

[Clay]

Николай,

$('.model__box').each(function() {
        const $container = $(this),
        $otherItems = $container.find('.btn'),
        $products = $container.find('.content');
    
        $otherItems.click(function() {
            const $this = $(this),
                index = $this.data('data-content');
        
            $otherItems.removeClass('active-other');
            $this.addClass('active-other');
            
            $products.removeClass('active-item')
                .filter('[data-id="' + index + '"]').addClass('active-item');
        });
    });

Answer 1

[rifat2125]

Добрый день!
Например, так можно сделать

$(document).ready(function() {
  
  
  $("button").click(function(event) {
    event.preventDefault();
    const id = $(this).attr('data-id');
    
    $(".btn").removeClass("active-btn");    
    $(".content").removeClass("active-content");
    $(`.btn[data-id='${id}']`).addClass("active-btn");    
    $(`.content[data-content='${id}']`).addClass("active-content");
  });

});

Comments

[rifat2125]

https://codepen.io/reaget/pen/jOzOXqK?editors=1111

[Clay]

Да отлично, оно работает, но не учел я в вопросе один момент. Кнопки и контент находятся не на одном уровне, а в разных частях страницы. Я как понима. код в таком случае не будет работать ?

[rifat2125]

Если структура кнопок и контента такая же как и то, что вы указали, то работать будет.

[Clay]

Она вот такая

<div>
    <div>
        <div>
            <button class="btn" data-id="1">Кнопка 1</button>
            <button class="btn" data-id="2">Кнопка 1</button>
        </div>
    </div>
</div>
<div class="content" data-content="1">Контент 1</div>
<div class="content" data-content="2">Контент 1</div>

[rifat2125]

Clay, Работать будет