4

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

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<button>Вперёд</button>
<button>Назад</button>
Как правильно будет описана функция JS Чтобы получить следующий результат. При нажатии присваивается класс active к первому div , при повторном нажатии класс удаляется и присваивается к следующему диву. если нажать Назад , то действие идет в обратном порядке.

2
  • Вам надо на чистом Javascript или можно так же по Jquery
    – Arsen
    10 апр 2018 в 10:30
  • на jquery можно конечно! я думаю нужно задействовать счётчик может быть и делать echo например nth-child(1++) ну это пока в мыслях...
    – yuda
    10 апр 2018 в 10:35

4 ответа 4

8

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<button id="forward">Вперёд</button>
<button id="back">Назад</button>

2
  • 1
    Мне кажется, что не стоит жестко задавать значение i = 3;, лучше использовать длину массива, так как количество элементов может быть разное, а править каждый раз код будет не очень хорошо и блоки могут добавляться динамически. 10 апр 2018 в 11:09
  • да, но стоит добавить отдельный класс для блоков 10 апр 2018 в 11:36
4

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;
}
<div id="wrapper">
  <div class="active">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>
    <button onclick="setNewActive('up')">Вперёд</button>
    <button onclick="setNewActive('down')">Назад</button>

3

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

$(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<button class="prev">Назад</button>
<button class="next">Вперёд</button>
</div>

1

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

Наиболее очевидный способ без лишних усложнений - с использованием свойств элемента 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; }
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<button id="first">⏪</button>
<button id="prev">◀</button>
<button id="next">▶</button>
<button id="last">⏩</button>

Ваш ответ

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

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