Переключение ссылок с JS

Общее
1

Есть такой кусочек кода:
<div class="paginator"> <a href="http://vk.com">1</a> <a href="http://ok.ru">2</a> <a href="http://yahoo.com">3</a> </div>
К нему есть CSS:
a {
display: inline-block;
margin-right: 10px;
padding: 3px 10px;
text-decoration: none;
border: 1px solid red;
border-radius: 15px;
}

.current {
font-weight: bold;
color: white;
background-color: red;
}

Я хочу, чтобы при клике по ссылке она приобретала класс .current. Если кликнуть по другой ссылке, она должна тоже приобрести класс .current, а вот та, которая была кликнута раньше, этот класс должна терять. Написал скрипт - по ссылке - здесь не знаю, как прикрепить: https://thimbleprojects.org/alessio18911/283428

Однако он не работает. Подскажите, какие в нём ошибки и как их исправить (JS только-только начал учить, поэтому предложите, по возможности, вариант попроще). Спасибо!

2

Так только получилось:

var array = document.querySelectorAll(".paginator a");
toggleClass = function () {
     for (var j = 0; j < array.length; j++) {
         array[j].classList.remove('current');
         this.classList.add('current');
         }
};

for (var j = 0; j < array.length; j++) {
     array[j].addEventListener('click', toggleClass);
}
3

Т.е. загвоздка была в этом слова - this? А какую роль оно выполняет здесь? Почему без него не работало?

4

Оно обозначает текущий элемент, над которым производится действие. То есть класс добавляется только ему, в определенный момент (только по нажатию).

5

Ага, что-то прояснилось. Спасибо большое! :slight_smile:

6

А подскажите, пожалуйста, ещё: можно ли в один и то же файл скрипта писать разные скрипты: например, для интерактивной карты и метки для первой страницы и ползунков для второй? И подключать одним файлом на обе страницы?

7

Думаю, можно. Главное, разделить части скрипта комментариями.

1 лайк
8

Спасибо! )

9

Захотелось чуть усложнить: я хотел бы сейчас, чтобы действие current не распространялось на стрелки “вправо”/“влево”. Я сделаю изменение их с hover/active. Как убрать их из массива ссылок, который создаётся в link? (немного поколдовав, я придумал дописать селектору .current:not(".previous"):not(".next"). Вроде бы, работает. Но не уверен, что это оптимально). И ещё, я хотел бы, чтобы если была включена первая страница, то к ссылке previous добавлялся класс disabled, соответственно, чтобы при наличии current у последней страницы класс disabled был у стрелки вправо - next? И ещё, как сделать так, чтобы стрелка, у которой в данный момент стоит disabled, ВООБЩЕ была некликабельной, т.е. ВООБЩЕ НИКУДА НЕ вела? Можно ли одновременно с добавлением класса disabled удалить атрибут href?
https://thimbleprojects.org/alessio18911/288111

10

Что-то не могу перейти в режим редактирования вашего проекта. Только просмотр.
UPD: вот так получилось: https://codepen.io/IneSSka/pen/EXZaVE

11

Что-то никак не разберусь с этим thimbl-ом… Вот рабочая ссылка:slight_smile: Посмотрите, пожалуйста, в чём мои ошибки https://thimbleprojects.org/alessio18911/288392
Ваш код тоже посмотрю обязательно, спасибо огромное! :slight_smile:
Да, и ещё хотел бы спросить: вот, скажем, я хочу забрать в массив только три ссылки с цифрами. Тогда я пишу: var link = getElementById(“page”); И тут всё перестаёт работать вообще! Думал, дело в том, что id должен быть один у одного элемента. Попробовал присвоить им ещё один общий класс .page. И сделать выборку в массив var link = getElementsByClassName(".page"); - то же самое (( В чём дело?

12

По поводу вашей ошибки https://stackoverflow.com/questions/33132393/el-classlist-is-undefined

13

Ага, я так понял, проблема в синтаксисе: необходимо в теле if обратиться как к элементу массива. Но я не совсем понимаю (по указанной Вами ссылке какой-то ваще жуткий синтаксис) как! Т.е. prev[0].classList.add(“disabled”);? Но так тоже не работает!

14

Но вы же массив собираете из всех элементов с классом .page или я что-то упустила?

15

А, да, простите, это я уже про следующее думаю:relaxed: С этим вопросом я разобрался, там ошибка в точке перед названием класса. Массив получился. Но, несмотря на это, disabled никак не хочет присваиваться стрелкам в случае клика по первой или последней ссылке с цифрой (

16

Я не могу видеть изменения в вашем коде, если изменяла его тоже(

17

Инесса, ура!!! - нашёл свои ошибки и всё заработало!! Создал как новый проект, думаю, сейчас Вы сможете увидеть: https://thimbleprojects.org/alessio18911/288447

1 лайк
18

Мне мой вариант ближе) Вам осталось запретить переход по ссылке для текущей страницы.

19

Ну, своя рубашка, как говорится, ближе к телу ) А вот это ещё одна задачка на пару часиков ((

20

Хотя… Вот зачем нужна noClick в Вашем коде!! А я-то думаю, что за она ) Кстати, Вы могли бы скинуть ссылку на окончательный Ваш вариант - по той, что Вы дали, всё время неактивна левая стрелка…