javascript — переключить активный класс — jQuery

Переключить активный класс — jQuery

Лично я бы сконцентрировал логику в одном обработчике событий. Вы можете переключить класс на элементе, по которому щелкнули первым, чтобы добавить / удалить активный. Затем вы можете отфильтровать все элементы, чтобы найти активный, а не тот, который только что щелкнул, чтобы удалить его из любых других, если тот, который щелкнул, был только помечен как активный.

 var $items = $('.item').on('click', function(e) { $(e.target).toggleClass('active'); $items.filter('.active').not(e.target).removeClass('active'); //get curent description let $desc = $(e.target).next(".desc"); // hide all other description execpt current $(".desc").not($desc).hide(); // show or hide current description $desc.toggle(); }); 
 .container { width: 95%; margin: auto; display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-flow: row dense; grid-gap: 0.5em; } .item, .desc { border: 1px solid grey; height: 100px; display: flex; justify-content: center; align-items: center; font-size: 20px; } .desc { display: none; grid-column: 1 / -1; } .active { background: rgba(100, 100, 100, 0.7); } 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;div class="item"{amp}gt;1{amp}lt;/div{amp}gt; {amp}lt;div class="desc"{amp}gt;Description 1{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;2{amp}lt;/div{amp}gt; {amp}lt;div class="desc"{amp}gt;Description 2{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;3{amp}lt;/div{amp}gt; {amp}lt;div class="desc"{amp}gt;Description 3{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;4{amp}lt;/div{amp}gt; {amp}lt;div class="desc"{amp}gt;Description 4{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;5{amp}lt;/div{amp}gt; {amp}lt;div class="desc"{amp}gt;Description 5{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;6{amp}lt;/div{amp}gt; {amp}lt;div class="desc"{amp}gt;Description 6{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector