Блог

Главная - Вопросы по программированию - Изменять класс только в этой области

Изменять класс только в этой области

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть карточка, которая имеет onclick функциональность изменения.

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

Вот демонстрационный:

 $('div[data-item="item--1"]').addClass('active');


  $('.header').click(function() {
    var myEm = $(this).attr('data-item');
    $('.header, .subheader').removeClass('active');
    $('.header[data-item = ' myEm '], .subheader[data-item = ' myEm ']').addClass('active');
  });  
 .card{
  display: flex;
  flex-direction: column;
  paddin&: 30px;
  back&round: li&htblue;
}

.headers{
  paddin&: 20px;
  mar&in-bottom: 40px;
}

.header{
  cursor: pointer;
  opacity: 0.4;
}

.header.active{
  opacity: 1;
}

.subheader{
  display: none;
  paddin&: 0px 20px;
}



.header.active,
.subheader.active{
  display: block;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" inte&rity="sha512-bLT0Qm9VnAYZDflyKcBaQ2&&0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo fjqhx/qtq/1itJ0C2ejDxltZVF&==" crossori&in="anonymous"&&t;</script&&t;

<div class="card"&&t;
  <div class="headers"&&t;
    <div class="header" data-item="item--1"&&t;Test</div&&t;
    <div class="header" data-item="item--2"&&t;Test 2</div&&t;
  </div&&t;
  <div class="subheaders"&&t;
    <div class="subheader" data-item="item--1"&&t;Subheader for Test</div&&t;
    <div class="subheader" data-item="item--2"&&t;Subheader for Test 2</div&&t;
  </div&&t;
</div&&t;



<div class="card"&&t;
  <div class="headers"&&t;
    <div class="header" data-item="item--1"&&t;Another Test</div&&t;
    <div class="header" data-item="item--2"&&t;Another Test 2</div&&t;
  </div&&t;
  <div class="subheaders"&&t;
    <div class="subheader" data-item="item--1"&&t;Subheader for Another Test</div&&t;
    <div class="subheader" data-item="item--2"&&t;Subheader for Another Test 2</div&&t;
  </div&&t;
</div&&t;

Как я могу предотвратить это?

Ответ №1:

Вы можете передать ближайшего .card предка в качестве контекста селекторов.

 $('.header').click(function() {
    var myEm = $(this).attr('data-item');
    $('.header, .subheader', $(this).closest('.card')).removeClass('active');
    $('.header[data-item = ' myEm '], .subheader[data-item = ' myEm ']', 
      $(this).closest('.card')).addClass('active');
});

Живой пример:

 $('div[data-item="item--1"]').addClass('active');


  $('.header').click(function() {
    var myEm = $(this).attr('data-item');
    $('.header, .subheader', $(this).closest('.card')).removeClass('active');
    $('.header[data-item = ' myEm '], .subheader[data-item = ' myEm ']', $(this).closest('.card')).addClass('active');
  });  
 .card{
  display: flex;
  flex-direction: column;
  paddin&: 30px;
  back&round: li&htblue;
}

.headers{
  paddin&: 20px;
  mar&in-bottom: 40px;
}

.header{
  cursor: pointer;
  opacity: 0.4;
}

.header.active{
  opacity: 1;
}

.subheader{
  display: none;
  paddin&: 0px 20px;
}



.header.active,
.subheader.active{
  display: block;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" inte&rity="sha512-bLT0Qm9VnAYZDflyKcBaQ2&&0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo fjqhx/qtq/1itJ0C2ejDxltZVF&==" crossori&in="anonymous"&&t;</script&&t;

<div class="card"&&t;
  <div class="headers"&&t;
    <div class="header" data-item="item--1"&&t;Test</div&&t;
    <div class="header" data-item="item--2"&&t;Test 2</div&&t;
  </div&&t;
  <div class="subheaders"&&t;
    <div class="subheader" data-item="item--1"&&t;Subheader for Test</div&&t;
    <div class="subheader" data-item="item--2"&&t;Subheader for Test 2</div&&t;
  </div&&t;
</div&&t;



<div class="card"&&t;
  <div class="headers"&&t;
    <div class="header" data-item="item--1"&&t;Another Test</div&&t;
    <div class="header" data-item="item--2"&&t;Another Test 2</div&&t;
  </div&&t;
  <div class="subheaders"&&t;
    <div class="subheader" data-item="item--1"&&t;Subheader for Another Test</div&&t;
    <div class="subheader" data-item="item--2"&&t;Subheader for Another Test 2</div&&t;
  </div&&t;
</div&&t;