1

При нажатии на button нужно чтобы к классу content1 добавлялся selected. и при нажатии на весь блок , класс selected должен удаляться. Я сделал добавление класса , никак не могу понять как сделать чтобы класс сразу же не удалялся при первом клике по button.

function addClickListener(card) {
var button = card.querySelector('.myBtn');
button.addEventListener('click', function () {
card.classList.add('selected');
});
}
var cards = document.querySelectorAll('.content1');
for (var i = 0 ; i < cards.length;i++){
    addClickListener(cards[i]);
}

html

<div class="content1" onclick="myFunc">
       <img src="img/%D0%A2%D0%B5%D1%81%D1%82-12001.jpg" alt="">
       <div class="content">

       <p class="header">
           Представительский люкс
       </p>
       <p class="text">
           Эксклюзивный номер с панорамным видом на центр города Москвы
       </p>
       <hr>
       <p class="price">
           от <span class="price1">7900</span> руб./сутки
       </p>
       <button  class="myBtn">Забронировать</button>
       </div>

function addClickListener(card) {
  var button = card.querySelector('.myBtn');
  button.addEventListener('click', function() {
    card.classList.add('selected');
  });
}
var cards = document.querySelectorAll('.content1');
for (var i = 0; i < cards.length; i++) {
  addClickListener(cards[i]);
}
.selected {
  background: lightgreen;
}
<div class="content1" onclick="myFunc">
  <img src="img/%D0%A2%D0%B5%D1%81%D1%82-12001.jpg" alt="">
  <div class="content">

    <p class="header">
      Представительский люкс
    </p>
    <p class="text">
      Эксклюзивный номер с панорамным видом на центр города Москвы
    </p>
    <hr>
    <p class="price">
      от <span class="price1">7900</span> руб./сутки
    </p>
    <button class="myBtn">Забронировать</button>
  </div>
</div>

1 ответ 1

1

function addClickListener(card) {
  card.addEventListener('click', function() {
    this.classList.remove('selected');
  });
  var button = card.querySelector('.myBtn');
  button.addEventListener('click', function(e) {
    card.classList.add('selected');
    e.stopPropagation();
  });
}
var cards = document.querySelectorAll('.content1');
for (var i = 0; i < cards.length; i++) {
  addClickListener(cards[i]);
}
.selected {
  background: lightgreen;
}
<div class="content1">
  <img src="img/%D0%A2%D0%B5%D1%81%D1%82-12001.jpg" alt="">
  <div class="content">

    <p class="header">
      Представительский люкс
    </p>
    <p class="text">
      Эксклюзивный номер с панорамным видом на центр города Москвы
    </p>
    <hr>
    <p class="price">
      от <span class="price1">7900</span> руб./сутки
    </p>
    <button class="myBtn">Забронировать</button>
  </div>
</div>

2
  • почему не работает без e.stopPropagation()?
    – damcha
    31 окт 2019 в 17:42
  • @damcha Потому что без e.stopPropagation() событие всплывет до родителя, а там - this.classList.remove('selected');.
    – user176262
    31 окт 2019 в 20:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.