0

Всем привет. Кто поможет - отдельная благодарность заранее, целый день провозился, просмотрел ролики, статьи, так нигде ничего не понял.

  1. Имеется код (Чуть кривоват здесь, но на сайте он выглядит так(1 скрин))введите сюда описание изображения

К сути данной темы, при нажатии на первый блок - всё работает как надо, так и должно быть, но при нажатии на второй блок - всё равно действие происходит с первым блоком. Добавлял и event.target и что только не делал - ничего не получалось.

Подскажите, что не так? Если есть возможность, исправить ошибки.

let all = document.getElementById('block');
let btn = document.querySelector('.arrow');
let moreText = document.querySelector('.more');
let changeMain = document.querySelector('.text');
let changeSpan = document.querySelector('.text-span');

all.addEventListener('click', function(event) {
  btn.classList.toggle('arrow-for');
  changeMain.classList.toggle('for-main', );
  changeSpan.classList.toggle('for-main');

  if (moreText.style.display === 'none') {
    moreText.style.display = 'block';
    btn.innerHTML = '<i class="fa fa-times" style="color: black"></i>';
  } else {
    moreText.style.display = 'none';
    btn.innerHTML = 'Know more <i class="fa fa-arrow-right"></i>';
  }
});
.img h6,
.img span {
  padding-left: 50px;
  position: absolute;
  color: #f7f7f7;
  padding-top: 230px;
  width: 90%;
}

.img span {
  padding-top: 260px;
  font-size: 15px;
}

.img .arrow {
  padding-top: 360px;
  cursor: pointer;
}

.arrow-for {
  background-color: #b2f2ee;
  transition: ease 0.2s;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

#more {
  position: relative;
  z-index: 3;
  color: black;
}

.for-main {
  z-index: 3 !important;
  position: relative;
  color: black !important;
  margin-top: -250px;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -webkit-transform: translate(0, 50px);
  -moz-transform: translate(0, 50px);
  -o-transform: translate(0, 50px);
}
<div class="content" id="block">
  <div class="img">
    <h6 class="text-uppercase font-weight-bold text-left text">Designing is the cool love for.</h6>
    <span class="text-span">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum libero odio soluta. Autem debitis, exercitationem maxime praesentium quaerat repudiandae sit... <p class="more" style="display: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto at aut beatae, consectetur dicta dolore ducimus ea eligendi enim eum expedita explicabo incidunt iure labore magnam neque provident saepe sit soluta suscipit tempora totam vel vitae voluptas voluptatem voluptatum. Earum eveniet facilis praesentium repudiandae? Ab assumenda doloremque dolorum</p></span>
    <span class="text-uppercase arrow">Know more <i class="fa fa-arrow-right"></i></span>
    <img src="http://i.yapx.ru/IM7a6.png" alt="image">
  </div>
  <div class="img">
    <h6 class="text-uppercase font-weight-bold text-left text">Designing is the cool love for.</h6>
    <span class="text-span">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum libero odio soluta. Autem debitis, exercitationem maxime praesentium quaerat repudiandae sit... <p class="more" style="display: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto at aut beatae, consectetur dicta dolore ducimus ea eligendi enim eum expedita explicabo incidunt iure labore magnam neque provident saepe sit soluta suscipit tempora totam vel vitae voluptas voluptatem voluptatum. Earum eveniet facilis praesentium repudiandae? Ab assumenda doloremque dolorum</p></span>
    <span class="text-uppercase arrow">Know more <i class="fa fa-arrow-right"></i></span>
    <img src="http://i.yapx.ru/IM7a4.png" alt="image">
  </div>
</div>

2 ответа 2

2

ответ @Александр'a не решает проблему с использованием делегирования.

При делегировании обработчик вешается на общий родительный контейнер 1-ин раз.

Простой пример:

// Выбираем общий родительный контейнер
const container = document.querySelector('.container');

// Вешаем на контейнер обработчик клика
container.addEventListener('click', e => {
  // Выбираем элемент с классом block, дальше мы будем с ним работать, важно подметить, что выбор идёт через передаваемый аргумент event.target от обработчика события
  const block = e.target.closest('.block');
  
  // Проверяем, если клик был совершен не по элементу с классом block, то отменяем действие
  if (!block) return;
  
  // Выбираем элемент с классом block-description того элемента, на который кликнули
  const description = block.querySelector('.block-description');
  
  // Выводим результат
  console.log(description.innerText);
});
.container {
  display: flex;
  flex-flow: row wrap;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

.block {
  box-sizing: border-box;
  width: 50%;
  border: 1px solid red;
  padding: 30px;
  cursor: pointer;
}
<div class="container">
  <div class="block">
    <div class="block-description">This is description of block #1</div>
  </div>
  
  <div class="block">
    <div class="block-description">This is description of block #2</div>
  </div>
</div>

1
  • Спасибо большое за подробное описание в JS. Очень помогло.
    – Lordeckiy
    Commented 15 июл. 2020 в 14:34
0

Я бы лучше слушал сами элементы, которые нужно менять, в таком стиле:

let all = document.getElementById('block');

const imgs = document.querySelectorAll('.img')

for (let i = 0; i < imgs.length; i++) {
  imgs[i].addEventListener('click', function() {
    let btn = this.querySelector('.arrow');
    let moreText = this.querySelector('.more');
    let changeMain = this.querySelector('.text');
    let changeSpan = this.querySelector('.text-span');
    btn.classList.toggle('arrow-for');
    changeMain.classList.toggle('for-main', );
    changeSpan.classList.toggle('for-main');

    if (moreText.style.display === 'none') {
      moreText.style.display = 'block';
      btn.innerHTML = '<i class="fa fa-times" style="color: black"></i>';
    } else {
      moreText.style.display = 'none';
      btn.innerHTML = 'Know more <i class="fa fa-arrow-right"></i>';
    }
  })
}
.img h6,
.img span {
  padding-left: 50px;
  position: absolute;
  color: #f7f7f7;
  padding-top: 230px;
  width: 90%;
}

.img span {
  padding-top: 260px;
  font-size: 15px;
}

.img .arrow {
  padding-top: 360px;
  cursor: pointer;
}

.arrow-for {
  background-color: #b2f2ee;
  transition: ease 0.2s;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

#more {
  position: relative;
  z-index: 3;
  color: black;
}

.for-main {
  z-index: 3 !important;
  position: relative;
  color: black !important;
  margin-top: -250px;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -webkit-transform: translate(0, 50px);
  -moz-transform: translate(0, 50px);
  -o-transform: translate(0, 50px);
}
    <div class="content" id="block">
      <div class="img">
        <h6 class="text-uppercase font-weight-bold text-left text for-main">
          Designing is the cool love for.
        </h6>
        <span class="text-span"
          >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum
          libero odio soluta. Autem debitis, exercitationem maxime praesentium
          quaerat repudiandae sit...
          <p class="more" style="display: none;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
            architecto at aut beatae, consectetur dicta dolore ducimus ea
            eligendi enim eum expedita explicabo incidunt iure labore magnam
            neque provident saepe sit soluta suscipit tempora totam vel vitae
            voluptas voluptatem voluptatum. Earum eveniet facilis praesentium
            repudiandae? Ab assumenda doloremque dolorum
          </p></span
        >
        <span class="text-uppercase arrow"
          >Know more <i class="fa fa-arrow-right"></i
        ></span>
        <img src="http://i.yapx.ru/IM7a6.png" alt="image" />
      </div>
      <div class="img">
        <h6 class="text-uppercase font-weight-bold text-left text">
          Designing is the cool love for.
        </h6>
        <span class="text-span"
          >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum
          libero odio soluta. Autem debitis, exercitationem maxime praesentium
          quaerat repudiandae sit...
          <p class="more" style="display: none;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
            architecto at aut beatae, consectetur dicta dolore ducimus ea
            eligendi enim eum expedita explicabo incidunt iure labore magnam
            neque provident saepe sit soluta suscipit tempora totam vel vitae
            voluptas voluptatem voluptatum. Earum eveniet facilis praesentium
            repudiandae? Ab assumenda doloremque dolorum
          </p></span
        >
        <span class="text-uppercase arrow"
          >Know more <i class="fa fa-arrow-right"></i
        ></span>
        <img src="http://i.yapx.ru/IM7a4.png" alt="image" />
      </div>
    </div>

5
  • Дай бог тебе здоровья
    – Lordeckiy
    Commented 15 июл. 2020 в 14:09
  • суть делегирования в том, чтобы такого не делать, если бы у вас было миллион элементов, то производительность веб-приложения бы резко упала
    – meine
    Commented 15 июл. 2020 в 14:10
  • Совершенно верно. Lordeckiy делегирование не всегда уместно, штука хорошая, но не нужно на ней зацикливаться.
    – Aleksandr
    Commented 15 июл. 2020 в 14:13
  • @Александр, делегирование не всегда уместно - если вы так сказали, объясните, в ответе, конечно, в каких случаях его не уместно использовать? исключая тот момент, что длина дочерних элементов не превышает 1-цы, почему вы использовали этот метод, как будете бороться с тем, что кол-во элементов возрастёт в x10000 раз?
    – meine
    Commented 15 июл. 2020 в 14:24
  • @meine я не правильно выразился, ошибся, прошу читать моё сообщение так - "делегирование - штука хорошая".
    – Aleksandr
    Commented 15 июл. 2020 в 20:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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