Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.07.2020, 15:18
Новичок на форуме
Отправить личное сообщение для LordeckiyYaya Посмотреть профиль Найти все сообщения от LordeckiyYaya
 
Регистрация: 15.07.2020
Сообщений: 3

Делегирование
Всем привет.
Кто поможет - отдельная благодарность заранее.

1) Имеется код HTML;

<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="img/services/image6.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="img/services/image1.png" alt="image">
            </div>
</div>


2) Код CSS
.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);
}

Нужно сделать делегирование, вот то что сделал я:
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>';
}
});


Но проблема с тем, что если я нажимаю на вторую таблицу - всё равно срабатывает первая таблица, знаю что нужен event.target, но как это всё реализовать? Нужно чтобы при нажатии на вторую таблицу - срабатывала вторая, при нажатии на первую - первая и т.д..
Ответить с цитированием
  #2 (permalink)  
Старый 15.07.2020, 16:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

делегирование
LordeckiyYaya,
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
body{
    background-color: hsla(30, 100%, 49%, 1);
}
.img{
    overflow: hidden;
}


.text-span  {
    display:  inline-block;
    transform:   translateY(250px);
    transition: 1s;
}
.arrow:before{
    content: 'Know more';
}

.for-main .text-span{
    transform: translateY(0px);
}
.for-main .arrow:before{
    content: 'Close';
}


</style>

</head>
<body>
<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"><i class="fa fa-arrow-right"></i></span>
                <img src="img/services/image6.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"><i class="fa fa-arrow-right"></i></span>
                <img src="img/services/image1.png" alt="image">
            </div>
</div>
<script>
document.addEventListener("click", event => {
    const btn = event.target.closest(".arrow");
    if(btn) {
        btn.parentNode.classList.toggle("for-main");
    }
});
</script>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему не работает делегирование? seotapki Events/DOM/Window 6 17.02.2019 09:46
Делегирование событий, принудительный вызов pokk Общие вопросы Javascript 1 11.11.2018 11:57
Использую делегирование в таблице plug-ugly jQuery 3 29.09.2017 09:05
Делегирование и hover Jquery Trues Элементы интерфейса 6 23.05.2015 22:00
делегирование событий Tecvid Events/DOM/Window 2 18.04.2015 16:04