JS При клике переключаться на следующий div

#javascript #jquery #функции

Например есть 



1
2
3
4





Как правильно будет описана функция JS Чтобы получить следующий результат. 
При нажатии присваивается класс active к первому div , при повторном нажатии класс
удаляется и присваивается к следующему диву. если нажать Назад , то действие идет в
обратном порядке. 
    

Ответы

Ответ 1

На скорую руку



$(document).ready(function () {


	$('.next').on('click', function () {
		if ($('div.active').index() == -1) {
			$('.box div:first-child').addClass('active');
		} else {

			$('div.active').next('div').addClass('active');
			$('div.active').prev('div').removeClass('active');
		}

	});


	$('.prev').on('click', function () {
		if ($('div.active').index() == -1) {
			/* без действий */
		} else {

			$('div.active').prev('div').addClass('active');
			$('div.active').next('div').removeClass('active');
		}

	});


});
.active{
background:#ccc;
}


1
2
3
4





Ответ 2

var i = 0;
document.getElementById('forward').onclick = function() {

  document.getElementsByTagName("div")[i].classList.remove("active");
  if(i == 3) {
    i = 0;
  } else {
    i++;
  }
  document.getElementsByTagName("div")[i].classList.add("active");
}
document.getElementById('back').onclick = function() {
  document.getElementsByTagName("div")[i].classList.remove("active");
  if(i == 0) {
    i = 3;
  } else {
    i--
  }
  document.getElementsByTagName("div")[i].classList.add("active");
}
.active {
  background: #999;
}

1
2
3
4




Ответ 3

let current = 0;
let setNewActive = function(duration) {
  let elements = document.getElementById('wrapper').getElementsByTagName('div');
  for (let i = 0; i < elements.length; i++) {
    if (elements[i].classList.contains('active')) {
      current = i;
    }
    elements[i].removeAttribute("class");
  }
  if (duration === 'up' && current > 0)
    current--;
  if (duration === 'down' && current < elements.length - 2)
    current++;
  elements[current].setAttribute('class', 'active');
}
.active {
  color: red;
}

  
1
  
2
  
3
  
4
  

    
    


Ответ 4

Такая функция может быть правильно описана несколькими способами :)

Наиболее очевидный способ без лишних усложнений - с использованием свойств элемента
previousElementSibling и nextElementSibling, которые указывают на соседние элементы
того же уровня вложенности. 



var current, 
    first = document.querySelector('#container > div:first-child'), 
    last  = document.querySelector('#container > div:last-child'); 

var btns = document.getElementsByTagName('button'); 
for (let btn of btns) 
  btn.addEventListener('click', onBtnClick); 

function onBtnClick(e) {
  if (current)
    current.classList.remove('active'); 
  switch (e.target.id) {
    case 'prev' : current = current ? current.previousElementSibling || last : last;
break; 
    case 'next' : current = current ? current.nextElementSibling || first : first;
break; 
    case 'first': current = first; break; 
    case 'last' : current = last; 
  }
  current.classList.add('active'); 
}
body,
button {
  font: 16px sans-serif;
}

button { width: 64px; height: 2em; }
#container { display: flex; }

#container > div {
  flex: 0 0 50px; height: 50px; 
  margin: 5px; 
  background-color: #777; color: #fff; 
  text-align: center; line-height: 50px; 
  border: 3px solid #444;
}
#container > div.active { border-color: #d44; }

  
1
  
2
  
3
  
4