主页 / 问题 / 1250878
Accepted
Oiki
Asked:2022-03-03 05:57:50 +0000 UTC2022-03-03 05:57:50 +0000 UTC

正确地将样式添加到不同的 div？

  • 772

我有一个构造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/

javascript

1 个回答

  1. Best Answer

    $(".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>

    • 0

相关问题