Правильно добавить стили в разные дивы?

Question

Имею конструкцию https://jsfiddle.net/profy/nh6omc4k/65/

<div class="woosb_r">
.....
</div>
<div class="woosb_r">
.....
</div>

Нужно при клике на один элемент добавить/изменить класс всего родителя и в глубине класс соседа, а при клике на другой элемент все вернуть как было (убрать/изменить класс)

я использовал

$(".woosb_r").on('click', '.woosb-qty-input-plus', function () {
    $('.woosb_r, .woosb-price-ori').addClass('edited');
});

$(".woosb_r").on('click', '.woosb-qty-input-minus', function () {
    $('.woosb_r, .woosb-price-ori').removeClass('edited');
});

номне добавляются стили во всех woosb_r а мне нужно только там где происходит клик, как исправить ?

вот здесь наверно понятней получилось https://jsfiddle.net/profy/nh6omc4k/65/

Answer 1

$(".woosb_r").on('click', '.woosb-qty-input-plus', function () {
    let parent = $(this).parents(".woosb_r");
    parent.addClass('edited');
    parent.find('.woosb-price-ori ins').addClass('ed');
}).on('click', '.woosb-qty-input-minus', function () {
    let parent = $(this).parents(".woosb_r");
    parent.removeClass('edited');
    parent.find('.woosb-price-ori ins').removeClass('ed');
});

.woosb_r {
     background: #dbcef5;
}
.woosb_r .edited{
     background: blue !important;
}
.edited{
     background: blue !important;
}
.woosb-price-ori .ed {
  color: #fff !important;
  background: green;
}
.woosb-qty-input-plus, .woosb-qty-input-minus {
    border: 2px solid #333;
    padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woosb_r">
  <div class="woosb-qty woosb-qty-plus-minus">
    <div class="woosb-qty-input">
      <div class="woosb-qty-input-minus">эл.2 - клик сюда удалить добавленные классы </div>
      <div class="quantity">
        <label class="text">Количество</label>
        <input class="input-text qty text">
        <span class="product-qty-arrows">
          <span class="lnr lnr-chevron-up"></span>
          <span class="chevron-down"></span>
        </span>
      </div>
      <div class="woosb-qty-input-plus">эл.1 - изменить фон - клик сюда добавить класс к родителю "woosb_r", и в глубину соседнего дива ".woosb-price .woosb-price-ori +новый класс "
      </div>
    </div>
    <div class="woosb-price">
      <div class="woosb-price-ori">
        <del>vbv</del>
        <ins>Это соседний DIV <br>И ЗДЕСЬ поменять ЦВЕТ ТЕКСТА при клике на эл.1</ins> </div>
      <div class="woosb-price-new"></div>
    </div>
  </div>
</div>
<div class="woosb_r">
  <div class="woosb-qty woosb-qty-plus-minus">
    <div class="woosb-qty-input">
      <div class="woosb-qty-input-minus">эл.2 - клик сюда удалить добавленные классы </div>
      <div class="quantity">
        <label class="text">Количество</label>
        <input class="input-text qty text">
        <span class="product-qty-arrows">
          <span class="lnr lnr-chevron-up"></span>
          <span class="chevron-down"></span>
        </span>
      </div>
      <div class="woosb-qty-input-plus">эл.1 - изменить фон - клик сюда добавить класс к родителю "woosb_r", и в глубину соседнего дива ".woosb-price .woosb-price-ori +новый класс "
      </div>
    </div>
    <div class="woosb-price">
      <div class="woosb-price-ori">
        <del>vbv</del>
        <ins>Это соседний DIV <br>И ЗДЕСЬ поменять ЦВЕТ ТЕКСТА при клике на эл.1</ins> </div>
      <div class="woosb-price-new"></div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Правильно добавить стили в разные дивы?

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