Изменение стилей элементов массива JQuery

183

12 мая 2019, 15:00

  Есть разметка:
<div>
<img id="next" src="img/right.png">
<img id="prev" src="img/left.png">
<h6 class="Place">А</h6>
<h6 class="Place">Б</h6>
<h6 class="Place">В</h6>
<h6 class="Place">Г</h6>
<h6 class="Place">Д</h6>
<h6 class="Place">Е</h6>
</div>

Изначально у всех элементов с классом ".Place" цвет черный, кроме первого (у первого красный). Как сделать так, что бы при клике на "#next", цвет второго элемента стал красным, а предыдущего черным и так дальше по кругу. И наоборот при клике на "#prev" цвет последнего элемента стал красным, а первого черным и так по кругу в обратом направлении?

Долблю через это:

$('#next').click(function() {
var elements = document.getElementsByClassName('Place');
for(var i=0; i < elements.length; i++){
elements[i].classList.add(.css('color', '#982518'));
};
});

Но тогда все элементы становятся красными. Вопрос в том как управлять стилем отдельного элемента массива и делать это по кругу при каждом клике?

Answer 1

Для вашей разметки:

window.onload = function() { 
  var nInd = 0; 
  var aObjs = Array.prototype.slice.call(document.querySelectorAll('.Place')); 
  document.addEventListener('click', function(e) { 
    aObjs[nInd].classList.remove('active'); 
    if (e.target.id == 'next') { nInd = (nInd + 1 < aObjs.length) ? nInd + 1 : 0; }  
    else if (e.target.id == 'prev') { nInd = (nInd - 1 > -1) ? nInd - 1 : aObjs.length - 1; } 
    aObjs[nInd].classList.add('active'); 
  }); 
  aObjs[nInd].classList.add('active'); 
}

.active { 
  color: #f00; 
}

<img id="next" src="img/right.png"> 
<img id="prev" src="img/left.png"> 
<h6 class="Place">А</h6> 
<h6 class="Place">Б</h6> 
<h6 class="Place">В</h6> 
<h6 class="Place">Г</h6> 
<h6 class="Place">Д</h6> 
<h6 class="Place">Е</h6>

Answer 2

У меня вот такое решение

var pag = document.getElementsByClassName('Place'); 
var pagLength = pag.length; 
var next =document.getElementById('next'); 
var prev =document.getElementById('prev'); 
var actionPos = 0; 
var k = 0; 
 
 
 
 
 
function leftRight(e) { 
	for(i = 0; i < pagLength-1; i++) { 
		pag[i].classList.remove('actionColor') 
	} 
	if(e == 'right') { 
		if(actionPos == pagLength-1) { 
			actionPos = 0 
		} else { 
			actionPos++; 
		} 
	} 
	if(e == 'left') { 
		if(actionPos == 0) { 
			actionPos = pagLength-1; 
		} else { 
			actionPos--; 
		} 
	} 
	for(i = 0; i < pagLength; i++) { 
		pag[i].classList.remove('actionColor') 
	} 
	pag[actionPos].classList.add('actionColor'); 
}

.actionColor { 
	color: red; 
}

 <div> 
        <img id="next" alt="right" onclick="leftRight('right')"> 
        <img id="prev" alt="left" onclick="leftRight('left')"> 
        <h6 class="Place actionColor">А</h6> 
        <h6 class="Place">Б</h6> 
        <h6 class="Place">В</h6> 
        <h6 class="Place">Г</h6> 
        <h6 class="Place">Д</h6> 
        <h6 class="Place">Е</h6> 
  </div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Добавить элемент рядом

Допустим есть где-то блок с классом "asd" и рядом с ним нужно добавить DOM, что-то наподобиеappend\

151

jQuery

Подсвечивание текущего дня недели?

Вывожу графике работы на сайтеНо как получить текущий день недели и применить к списку свой класс, чтоб он подсвечивался

154

jQuery

Как вывести div с id классом?

скрипт который выводит <span style="color:#0FB10F">Сохранено</span> после удачной операции, как вывести его именно в <div id="block"> я предпологаю что...

126

jQuery

Как выбрать наибольший элемент массива?

Есть такая задача - отследить последнее сообщение в чатеЯ решил отслеживать его по времени, собираю массив, осталось оттуда только вытащить...

167