0

Ребята выручайте, есть такая разметка

<div id="row0" class="services-container row-services">
  <div class="services-child-box box1">
    <div class="layer-box"></div>
  </div>
  <div class="services-child-box box2">
    <div class="layer-box"></div>
  </div>
  <div class="services-child-box box3">
    <div class="layer-box"></div>
  </div>
  <div class="services-child-box box4">
    <div class="layer-box"></div>
  </div>
  <div class="services-child-box box5">
    <div class="layer-box"></div>
  </div>
  <div class="services-child-box box6">
    <div class="layer-box"></div>
  </div>
  <div class="services-child-box box7">
    <div class="layer-box"></div>
  </div>
  <div class="services-child-box box8 services-center-box services-button"></div>
  <div class="services-child-box box9">
    <div class="layer-box"></div>
  </div>
  <div class="services-child-box box10">
    <div class="layer-box"></div>
  </div>
  <div class="services-child-box box11">
    <div class="layer-box"></div>
  </div>
  <div class="services-child-box box12">
    <div class="layer-box"></div>
  </div>
  <div class="services-child-box box13">
    <div class="layer-box"></div>
  </div>
  <div class="services-child-box box14">
    <div class="layer-box"></div>
  </div>
  <div class="services-child-box box15">
    <div class="layer-box"></div>
  </div>
</div>

выглядит это примерно следующим образом :

введите сюда описание изображения

.layer-box это - цветной квадрат и обводка
.box[число] это - ячейка под цветным квадратом, там может лежать любое изображение.

Цель: навожу или нажимаю на центральную кнопку к .layer-box добавляется класс с opacity 0 т.е чтобы показать изображение лежащее под ним, задача на первый взгляд не особо сложная если бы ряд был один, а их неизвестно сколько будет, мне ведь нужно добавлять классы только в соответствующем ряду, т.е только там где кнопка на которую навели, а все остальные ряды скрыты. Код javascript прикреплять не стану, всё равно ничего полезного я не наделал. Мне очень интересно как эту задачу решить.

javascript

var button = document.querySelectorAll('.services-button');
var box = document.querySelectorAll('.services-child-box');
var row = document.querySelectorAll('.row-services');
var layerBox = document.querySelectorAll('.layer-box');

    for (var i = 0;  i<row.length;  i++) {
        index = i;
        button[index].addEventListener('mouseover', showLayers);
    }

function showLayers () {
    for(var i = 0; i<row.length; i++) {
        row[i].classList.remove('active-hovered');
        var thisRow = this.parentElement.classList.add('active-hovered');

    }

    var activeBox = document.querySelectorAll('.active-hovered .layer-box');

    for (var i = 0; i<activeBox.length; i++) {
        this.parentElement.querySelectorAll('.layer-box')[i].classList.add('test' +i)


    }

}

P.s Я не использую jquery.

2
  • @lexxl, Ну, покажите как бы вы это сделали через this
    – GoodNew5
    12 окт 2016 в 7:38
  • @lexxl, а что не так с this Тут?
    – Grundy
    12 окт 2016 в 7:45

2 ответа 2

3

Используйте css чтобы прятать layerы

var button = document.querySelectorAll('.row .hide');
var box = document.querySelectorAll('.child');
var row = document.querySelectorAll('.row');
var layer = document.querySelectorAll('.layer');

for (var i = 0; i < button.length; i++) {
  button[i].addEventListener('mouseover', hideLayers);
  button[i].addEventListener('mouseout', showLayers);
  button[i].addEventListener('click', forseHideLayers);
}
var forsed = false;

function hideLayers(event) {
  var e = event.target;
  while (!e.matches('.row')) e = e.parentElement;
  e.classList.add('hide-layers');
}

function forseHideLayers(event) {
  var e = event.target;
  while (!e.matches('.row')) e = e.parentElement;
  e.classList.add('hide-layers');
  forsed = true;
}

function showLayers(event) {
  var e = event.target;
  while (!e.matches('.row')) e = e.parentElement;
  if (!forsed)
    e.classList.remove('hide-layers');
}
* {
  border: 1px solid black;
}
.row>.child>.layer{
  opacity:1;
  transition:opacity 0.4s;
}
.row>.child>.layer.delay-2{
  transition:opacity 0.4s 0.2s;
}
.row>.child>.layer.delay-4{
  transition:opacity 0.4s 0.4s;
}
.row.hide-layers>.child>.layer{
  opacity:0;
}
<div class="row">
  <div class="child">
    <div class="layer">over</div>
  </div>
  <div class="child">
    <div class="layer delay-2">over</div>
  </div>
  <div class="child">
    <div class="layer delay-4">over</div>
  </div>
  <button class="hide">hide</button>
</div>

5
  • работать должно вот так : citytime.es/en.html
    – GoodNew5
    12 окт 2016 в 8:04
  • 1
    Ну, как-то так.
    – Dimava
    12 окт 2016 в 8:16
  • Спасибо добрый человек) а дело ведь всего лишь в css было)
    – GoodNew5
    12 окт 2016 в 8:52
  • Ну, /там/ написано скорее всего с js.
    – Dimava
    12 окт 2016 в 8:52
  • по сути мой js начал работать так как нужно, после того как вы меня на правильный путь направили)
    – GoodNew5
    12 окт 2016 в 9:04
0

Сделал вот так, может быть ещё такой вариант, может кому пригодится :)

    var button = document.querySelectorAll('.services-button');
    var row = document.querySelectorAll('.row-services');

	for (var i = 0;  i<row.length;  i++) {
		index = i;
		button[index].addEventListener('mouseover', showLayers);
	}

 function showLayers (event) {
	for(var i = 0; i<row.length; i++) {
		row[i].classList.remove('hide-layers');
		var thisRow = this.parentElement.classList.add('hide-layers');
	}

}

Ваш ответ

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

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