Триггер JS влияет только на родителей и братьев и сестер - PullRequest
Новая
       0

Триггер JS влияет только на родителей и братьев и сестер

0 голосов
/ 01 ноября 2018

Контекст: У меня есть раздел слайдера до и после работы, нацеленный на класс и влияющий на свойства css родительского или родственного элемента. Однако, когда я дублирую тот же раздел, второй, очевидно, влияет на первый слайдер. Я хочу иметь возможность дублировать мой раздел много раз без необходимости каждый раз прикасаться к коду.

Что я знаю: querySelector находит только первый элемент. Поэтому я начал использовать querySelectorAll, но, поскольку он затрагивает другой класс родного брата и родителя, я начинаю сильно путаться.

Что мне интересно: Как я могу сделать так, чтобы каждый триггер влиял только на его родительские и родственные свойства? Нужно ли создавать разные классы CSS для каждого слайдера?

Что я сделал: Я написал кодовую ручку с двумя разделами, чтобы вы могли лучше понять мою проблему и, в конце концов, попробовать ее. https://codepen.io/greg_o/pen/KGOKvG

Мой JS 

let active = false;


var scrollers = document.querySelectorAll('.scroller');

scrollers.forEach(element => {
  element.addEventListener('mousedown',function scrolling(){
    active = true;
    element.classList.add('scrolling');
  });
});


document.body.addEventListener('mouseup',function(){
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});


document.body.addEventListener('mouseleave',function(){
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});


document.body.addEventListener('mousemove',function(e){
  if (!active) return;
  let x = e.pageX;
  x -= document.querySelector('.wrapper').getBoundingClientRect().left;
  scrollIt(x);
});


function scrollIt(x){
    let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth)));
    document.querySelector('.after').style.width = 'calc(' + transform + 'px + 35vw)';
    document.querySelector('.scroller').style.left = transform-25+"px";
}


scrollIt(300);

Мой CSS 

#slider{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wrapper{
        width: 30vw;
        height: 20vw;
        position:relative;
        overflow:hidden;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.2);
    }

    .before, .after {
        width:100%;
        height:100%;
        background-repeat:no-repeat;
        background-color: white;
        background-size: cover;
        background-position: center;
        position: absolute;
        top:0;
        left:0;
        pointer-events:none;
        overflow: hidden;
    }

    .content-image{
        height:100%;
    }

    .after{
        transform: skewX(-30deg) translate(-35vw); 
    }

    .content-image.apres{
        transform: skewX(30deg) translate(35vw);
    }

    .scroller{
        width: 50px;
        height:50px;
        position: absolute;
        top:50%;
        transform:translateY(-50%);
        border-radius:50%;
        background-color: transparent;
        opacity:0.9;
        pointer-events:auto;
        cursor: move;
        box-sizing: border-box;
        border: 3px solid #fff;
    }

    .scroller:hover{
        opacity:1;
    }

    .scrolling{
        pointer-events:none;
        opacity:1;
        // z-index: 1;
    }

    .scroller__thumb{
        margin:0;
        box-sizing: border-box;
        width:100%;
        height:100%;
        padding:5px;
    }

    .scroller:before, .scroller:after{
        background: #fff;
        content:" ";
        display: block;
        width: 3px;
        height: 9999px;
        position: absolute;
        left: 50%;
        margin-left: -3.5px;
        z-index: 30;
        transition:0.1s;
    }
    .scroller:before{
        top:95%;
        left:28%;
        transform-origin:top;
        transform:rotate(30deg)
    }
    .scroller:after{
        bottom:95%;
        left:83%;
        transform-origin:bottom;
        transform:rotate(30deg)
    }

Мой HTML 

<section id="slider">
  <div class="wrapper">
  <div class="before">
    <img class="content-image" src="https://farm2.staticflickr.com/1638/26145024230_06acd55d1b_b.jpg" draggable="false"/>   </div>
  <div class="after">
    <img class="content-image apres" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false"/>
  </div>
    <div class="scroller">
      <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
    </div>
  </div>
</section>


<section id="slider">
  <div class="wrapper">
  <div class="before">
    <img class="content-image" src="https://farm2.staticflickr.com/1638/26145024230_06acd55d1b_b.jpg" draggable="false"/>   </div>
  <div class="after">
    <img class="content-image apres" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false"/>
  </div>
    <div class="scroller">
      <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
    </div>
  </div>
</section>

Ответы [ 2 ]

0 голосов
/ 01 ноября 2018

Вы можете исправить вашу проблему, передав document.getElementsByClassName("scrolling")[0].parentNode в ScrollIt метод. И используйте этот параметр, чтобы найти связанные элементы .after и .wrapper.

Вот кодекс . 

let active = false;


var scrollers = document.querySelectorAll('.scroller');

scrollers.forEach(element => {
  element.addEventListener('mousedown',function scrolling(){
    active = true;
    element.classList.add('scrolling');
  });
});


document.body.addEventListener('mouseup',function(){
  active = false;
  document.querySelector('.scrolling').classList.remove('scrolling');
});


document.body.addEventListener('mouseleave',function(){
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});


document.body.addEventListener('mousemove',function(e){
  if (!active) return;
  let x = e.pageX;
  x -= document.getElementsByClassName("scrolling")[0].parentNode.getBoundingClientRect().left;
  scrollIt(document.getElementsByClassName("scrolling")[0].parentNode, x);
});


function scrollIt(elem, x){
    let transform = Math.max(0,(Math.min(x,elem.offsetWidth)));
    elem.querySelector('.after').style.width = 'calc(' + transform + 'px + 35vw)';
    elem.querySelector('.scroller').style.left = transform-25+"px";
}
scrollIt(document.getElementsByClassName("wrapper")[0] ,300);
scrollIt(document.getElementsByClassName("wrapper")[1] ,20);
#slider{
	  	display: flex;
	  	align-items: center;
	  	justify-content: center;
	}
		
	.wrapper{
	  	width: 30vw;
	  	height: 20vw;
	  	position:relative;
	  	overflow:hidden;
	  	box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.2);
	}
	
	.before, .after {
	  	width:100%;
	  	height:100%;
	  	background-repeat:no-repeat;
	  	background-color: white;
	  	background-size: cover;
	  	background-position: center;
	  	position: absolute;
	  	top:0;
	  	left:0;
	  	pointer-events:none;
	  	overflow: hidden;
	}
	
	.content-image{
	  	height:100%;
	}
	
	.after{
	  	transform: skewX(-30deg) translate(-35vw); 
	}
	
	.content-image.apres{
	  	transform: skewX(30deg) translate(35vw);
	}
	
	.scroller{
	  	width: 50px;
	  	height:50px;
	  	position: absolute;
	  	top:50%;
	  	transform:translateY(-50%);
	  	border-radius:50%;
	  	background-color: transparent;
	  	opacity:0.9;
	  	pointer-events:auto;
	  	cursor: move;
	  	box-sizing: border-box;
	  	border: 3px solid #fff;
	}
	
	.scroller:hover{
	  	opacity:1;
	}
	
	.scrolling{
		pointer-events:none;
		opacity:1;
		// z-index: 1;
	}

	.scroller__thumb{
		margin:0;
		box-sizing: border-box;
		width:100%;
		height:100%;
		padding:5px;
	}
	
	.scroller:before, .scroller:after{
		background: #fff;
		content:" ";
		display: block;
		width: 3px;
		height: 9999px;
		position: absolute;
		left: 50%;
		margin-left: -3.5px;
		z-index: 30;
		transition:0.1s;
	}
	.scroller:before{
	  	top:95%;
	  	left:28%;
	  	transform-origin:top;
	  	transform:rotate(30deg)
	}
	.scroller:after{
	  	bottom:95%;
	  	left:83%;
	  	transform-origin:bottom;
	  	transform:rotate(30deg)
	}
<section id="slider">
  <div class="wrapper">
  <div class="before">
    <img class="content-image" src="https://farm2.staticflickr.com/1638/26145024230_06acd55d1b_b.jpg" draggable="false"/>   </div>
  <div class="after">
    <img class="content-image apres" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false"/>
  </div>
    <div class="scroller">
      <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
    </div>
  </div>
</section>


<section id="slider">
  <div class="wrapper">
  <div class="before">
    <img class="content-image" src="https://farm2.staticflickr.com/1638/26145024230_06acd55d1b_b.jpg" draggable="false"/>   </div>
  <div class="after">
    <img class="content-image apres" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false"/>
  </div>
    <div class="scroller">
      <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
    </div>
  </div>
</section>
0 голосов
/ 01 ноября 2018

Я выполнил некоторые изменения в вашем коде, теперь он работает нормально.

https://codepen.io/anon/pen/ZqgZmO.

let active = false;


var scrollers = document.querySelectorAll('.scroller');
var sliders = document.querySelectorAll('.slider');

scrollers.forEach(element => {
  element.addEventListener('mousedown',function scrolling(){
    active = true;
    element.classList.add('scrolling');
  });
});

sliders.forEach(element => {
      element.addEventListener('mouseup',function(){
          active = false;
          element.querySelector('.scroller').classList.remove('scrolling');
     });

      element.addEventListener('mouseleave',function(){
          active = false;
          element.querySelector('.scroller').classList.remove('scrolling');
      });


      element.addEventListener('mousemove',function(e){
         if (!active) return;
              let x = e.pageX;
              x -= element.querySelector('.wrapper').getBoundingClientRect().left;
              scrollIt(x,element);
     });

});


function scrollIt(x, element){
    let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth)));
    element.querySelector('.after').style.width = 'calc(' + transform + 'px + 35vw)';
    element.querySelector('.scroller').style.left = transform-25+"px";
}


scrollIt(300);

Проблема в том, что вы используете один и тот же идентификатор для двух слайдеров (id = "slider") и добавляете событие в document.body. в будущем постарайтесь сфокусировать ваше мероприятие на одном элементе, в нашем случае ползунки.

Надеюсь, это поможет. С наилучшими пожеланиями

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...