Как это лучше запрограммировать?

Question

Вячеслав Мухин @slavaweb

web-разработчик

JavaScript

Как это лучше запрограммировать?

вот кусок кода:

var toggle = document.querySelectorAll(".faq__accordion-toggle");
var answer = document.querySelectorAll(".faq__accordion-answer");

  toggle[0].addEventListener("click", function (event){
    event.preventDefault();
    console.log("Клик по ссылки");
    if (answer[0].classList.contains("faq__item-answer-show")) {
      answer[0].classList.remove("faq__item-answer-show");
    } 
    else {
       answer[0].classList.add("faq__item-answer-show");
       answer[1].classList.remove("faq__item-answer-show");
       answer[2].classList.remove("faq__item-answer-show");
       answer[3].classList.remove("faq__item-answer-show");
       answer[4].classList.remove("faq__item-answer-show");
       answer[5].classList.remove("faq__item-answer-show");
       answer[6].classList.remove("faq__item-answer-show");
       answer[7].classList.remove("faq__item-answer-show");
       answer[8].classList.remove("faq__item-answer-show");
       answer[9].classList.remove("faq__item-answer-show");
       answer[10].classList.remove("faq__item-answer-show");
       answer[11].classList.remove("faq__item-answer-show");
    }
    });

весь не влез повторяется он 12 раз, обращение к элементу массива с 0 до 11 в первой части, а после else в каждом новом повторении .add перемещается на строчку ниже заменяясь на remove. Так вот как это грамотно запрограммировать???

Вопрос задан более трёх лет назад
250 просмотров

Комментировать

Подписаться 1 Оценить Комментировать

Пригласить эксперта

Ответы на вопрос 4

4 комментария

Вячеслав Мухин @slavaweb Автор вопроса

var toggle = document.querySelectorAll(".faq__accordion-toggle");
var answer = document.querySelectorAll(".faq__accordion-answer");

toggle[0].addEventListener("click", function (event){
event.preventDefault();
console.log("Клик по ссылки");
if (answer[0].classList.contains("faq__item-answer-show")) {
answer[0].classList.remove("faq__item-answer-show");
}
else {
answer[0].classList.add("faq__item-answer-show");
answer[1].classList.remove("faq__item-answer-show");
answer[2].classList.remove("faq__item-answer-show");
answer[3].classList.remove("faq__item-answer-show");
answer[4].classList.remove("faq__item-answer-show");
answer[5].classList.remove("faq__item-answer-show");
answer[6].classList.remove("faq__item-answer-show");
answer[7].classList.remove("faq__item-answer-show");
answer[8].classList.remove("faq__item-answer-show");
answer[9].classList.remove("faq__item-answer-show");
answer[10].classList.remove("faq__item-answer-show");
answer[11].classList.remove("faq__item-answer-show");
}
});
toggle[1].addEventListener("click", function (event){
event.preventDefault();
console.log("Клик по ссылки");
if (answer[1].classList.contains("faq__item-answer-show")) {
answer[1].classList.remove("faq__item-answer-show");
}
else {
answer[0].classList.remove("faq__item-answer-show");
answer[1].classList.add("faq__item-answer-show");
answer[2].classList.remove("faq__item-answer-show");
answer[3].classList.remove("faq__item-answer-show");
answer[4].classList.remove("faq__item-answer-show");
answer[5].classList.remove("faq__item-answer-show");
answer[6].classList.remove("faq__item-answer-show");
answer[7].classList.remove("faq__item-answer-show");
answer[8].classList.remove("faq__item-answer-show");
answer[9].classList.remove("faq__item-answer-show");
answer[10].classList.remove("faq__item-answer-show");
answer[11].classList.remove("faq__item-answer-show");
}
});
toggle[2].addEventListener("click", function (event){
event.preventDefault();
console.log("Клик по ссылки");
if (answer[2].classList.contains("faq__item-answer-show")) {
answer[2].classList.remove("faq__item-answer-show");
}
else {
answer[0].classList.remove("faq__item-answer-show");
answer[1].classList.remove("faq__item-answer-show");
answer[2].classList.add("faq__item-answer-show");
answer[3].classList.remove("faq__item-answer-show");
answer[4].classList.remove("faq__item-answer-show");
answer[5].classList.remove("faq__item-answer-show");
answer[6].classList.remove("faq__item-answer-show");
answer[7].classList.remove("faq__item-answer-show");
answer[8].classList.remove("faq__item-answer-show");
answer[9].classList.remove("faq__item-answer-show");
answer[10].classList.remove("faq__item-answer-show");
answer[11].classList.remove("faq__item-answer-show");
}
});
toggle[3].addEventListener("click", function (event){
event.preventDefault();
console.log("Клик по ссылки");
if (answer[3].classList.contains("faq__item-answer-show")) {
answer[3].classList.remove("faq__item-answer-show");
}
else {
answer[0].classList.remove("faq__item-answer-show");
answer[1].classList.remove("faq__item-answer-show");
answer[2].classList.remove("faq__item-answer-show");
answer[3].classList.add("faq__item-answer-show");
answer[4].classList.remove("faq__item-answer-show");
answer[5].classList.remove("faq__item-answer-show");
answer[6].classList.remove("faq__item-answer-show");
answer[7].classList.remove("faq__item-answer-show");
answer[8].classList.remove("faq__item-answer-show");
answer[9].classList.remove("faq__item-answer-show");
answer[10].classList.remove("faq__item-answer-show");
answer[11].classList.remove("faq__item-answer-show");
}
});
toggle[4].addEventListener("click", function (event){
event.preventDefault();
console.log("Клик по ссылки");
if (answer[4].classList.contains("faq__item-answer-show")) {
answer[4].classList.remove("faq__item-answer-show");
}
else {
answer[0].classList.remove("faq__item-answer-show");
answer[1].classList.remove("faq__item-answer-show");
answer[2].classList.remove("faq__item-answer-show");
answer[3].classList.remove("faq__item-answer-show");
answer[4].classList.add("faq__item-answer-show");
answer[5].classList.remove("faq__item-answer-show");
answer[6].classList.remove("faq__item-answer-show");
answer[7].classList.remove("faq__item-answer-show");
answer[8].classList.remove("faq__item-answer-show");
answer[9].classList.remove("faq__item-answer-show");
answer[10].classList.remove("faq__item-answer-show");
answer[11].classList.remove("faq__item-answer-show");
}
});
toggle[5].addEventListener("click", function (event){
event.preventDefault();
console.log("Клик по ссылки");
if (answer[5].classList.contains("faq__item-answer-show")) {
answer[5].classList.remove("faq__item-answer-show");
}
else {
answer[0].classList.remove("faq__item-answer-show");
answer[1].classList.remove("faq__item-answer-show");
answer[2].classList.remove("faq__item-answer-show");
answer[3].classList.remove("faq__item-answer-show");
answer[4].classList.remove("faq__item-answer-show");
answer[5].classList.add("faq__item-answer-show");
answer[6].classList.remove("faq__item-answer-show");
answer[7].classList.remove("faq__item-answer-show");
answer[8].classList.remove("faq__item-answer-show");
answer[9].classList.remove("faq__item-answer-show");
answer[10].classList.remove("faq__item-answer-show");
answer[11].classList.remove("faq__item-answer-show");
}
});
toggle[6].addEventListener("click", function (event){
event.preventDefault();
console.log("Клик по ссылки");
if (answer[6].classList.contains("faq__item-answer-show")) {
answer[6].classList.remove("faq__item-answer-show");
}
else {
answer[0].classList.remove("faq__item-answer-show");
answer[1].classList.remove("faq__item-answer-show");
answer[2].classList.remove("faq__item-answer-show");
answer[3].classList.remove("faq__item-answer-show");
answer[4].classList.remove("faq__item-answer-show");
answer[5].classList.remove("faq__item-answer-show");
answer[6].classList.add("faq__item-answer-show");
answer[7].classList.remove("faq__item-answer-show");
answer[8].classList.remove("faq__item-answer-show");
answer[9].classList.remove("faq__item-answer-show");
answer[10].classList.remove("faq__item-answer-show");
answer[11].classList.remove("faq__item-answer-show");
}
});
toggle[7].addEventListener("click", function (event){
event.preventDefault();
console.log("Клик по ссылки");
if (answer[7].classList.contains("faq__item-answer-show")) {
answer[7].classList.remove("faq__item-answer-show");
}
else {
answer[0].classList.remove("faq__item-answer-show");
answer[1].classList.remove("faq__item-answer-show");
answer[2].classList.remove("faq__item-answer-show");
answer[3].classList.remove("faq__item-answer-show");
answer[4].classList.remove("faq__item-answer-show");
answer[5].classList.remove("faq__item-answer-show");
answer[6].classList.remove("faq__item-answer-show");
answer[7].classList.add("faq__item-answer-show");
answer[8].classList.remove("faq__item-answer-show");
answer[9].classList.remove("faq__item-answer-show");
answer[10].classList.remove("faq__item-answer-show");
answer[11].classList.remove("faq__item-answer-show");
}
});
toggle[8].addEventListener("click", function (event){
event.preventDefault();
console.log("Клик по ссылки");
if (answer[8].classList.contains("faq__item-answer-show")) {
answer[8].classList.remove("faq__item-answer-show");
}
else {
answer[0].classList.remove("faq__item-answer-show");
answer[1].classList.remove("faq__item-answer-show");
answer[2].classList.remove("faq__item-answer-show");
answer[3].classList.remove("faq__item-answer-show");
answer[4].classList.remove("faq__item-answer-show");
answer[5].classList.remove("faq__item-answer-show");
answer[6].classList.remove("faq__item-answer-show");
answer[7].classList.remove("faq__item-answer-show");
answer[8].classList.add("faq__item-answer-show");
answer[9].classList.remove("faq__item-answer-show");
answer[10].classList.remove("faq__item-answer-show");
answer[11].classList.remove("faq__item-answer-show");
}
});
toggle[9].addEventListener("click", function (event){
event.preventDefault();
console.log("Клик по ссылки");
if (answer[9].classList.contains("faq__item-answer-show")) {
answer[9].classList.remove("faq__item-answer-show");
}
else {
answer[0].classList.remove("faq__item-answer-show");
answer[1].classList.remove("faq__item-answer-show");
answer[2].classList.remove("faq__item-answer-show");
answer[3].classList.remove("faq__item-answer-show");
answer[4].classList.remove("faq__item-answer-show");
answer[5].classList.remove("faq__item-answer-show");
answer[6].classList.remove("faq__item-answer-show");
answer[7].classList.remove("faq__item-answer-show");
answer[8].classList.remove("faq__item-answer-show");
answer[9].classList.add("faq__item-answer-show");
answer[10].classList.remove("faq__item-answer-show");
answer[11].classList.remove("faq__item-answer-show");
}
});
toggle[10].addEventListener("click", function (event){
event.preventDefault();
console.log("Клик по ссылки");
if (answer[10].classList.contains("faq__item-answer-show")) {
answer[10].classList.remove("faq__item-answer-show");
}
else {
answer[0].classList.remove("faq__item-answer-show");
answer[1].classList.remove("faq__item-answer-show");
answer[2].classList.remove("faq__item-answer-show");
answer[3].classList.remove("faq__item-answer-show");
answer[4].classList.remove("faq__item-answer-show");
answer[5].classList.remove("faq__item-answer-show");
answer[6].classList.remove("faq__item-answer-show");
answer[7].classList.remove("faq__item-answer-show");
answer[8].classList.remove("faq__item-answer-show");
answer[9].classList.remove("faq__item-answer-show");
answer[10].classList.add("faq__item-answer-show");
answer[11].classList.remove("faq__item-answer-show");
}
});
toggle[11].addEventListener("click", function (event){
event.preventDefault();
console.log("Клик по ссылки");
if (answer[11].classList.contains("faq__item-answer-show")) {
answer[11].classList.remove("faq__item-answer-show");
}
else {
answer[0].classList.remove("faq__item-answer-show");
answer[1].classList.remove("faq__item-answer-show");
answer[2].classList.remove("faq__item-answer-show");
answer[3].classList.remove("faq__item-answer-show");
answer[4].classList.remove("faq__item-answer-show");
answer[5].classList.remove("faq__item-answer-show");
answer[6].classList.remove("faq__item-answer-show");
answer[7].classList.remove("faq__item-answer-show");
answer[8].classList.remove("faq__item-answer-show");
answer[9].classList.remove("faq__item-answer-show");
answer[10].classList.remove("faq__item-answer-show");
answer[11].classList.add("faq__item-answer-show");
}
});

Написано более трёх лет назад
copal @copal

Вячеслав Мухин: я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал
я ипал я ипал я ипал я ипал я ипал я ипал

Написано более трёх лет назад
Алексей Зуев @yurzui

) жесть

Написано более трёх лет назад
Алексей Ярков @yarkov Куратор тега JavaScript

copal: ))))) бля, спасибо, поржал ))

Написано более трёх лет назад

Комментировать

6 комментариев

lega @lega

Если класс просто делает ответ видимым, то можно проще: jsfiddle.net/lega911/kdLyc595

Написано более трёх лет назад
Вячеслав Мухин @slavaweb Автор вопроса

спасибо, но то что вы написали я не пойму по ссылки в редакторе js ничего не написано

Написано более трёх лет назад
lega @lega

Вячеслав Мухин: В этом нет необходимости,
1) al-repeat="i in 12" - клонирует блок 12 раз
2) @click="active=..." - по клику выполняет js выражение, тут в переменную active присваивается переменная i из al-repeat "active=(active!=i)?i:-1"
3) :hidden="active!=i" - скрыть блок если active!=i

Это весь код который необходим для данной "задачки", если будет что-то сложнее, тогда можно будет и js добавить. Статья: https://habrahabr.ru/post/272125/

Написано более трёх лет назад
Алексей Зуев @yurzui

lega: А как же подключение angular light? разве это не js?

Написано более трёх лет назад
lega @lega

Алексей Зуев: это подключаемая либа, вам её не нужно писать, она уже готова.

Написано более трёх лет назад
Вячеслав Мухин @slavaweb Автор вопроса

все это конечно круто но я имел в виду используя этот код который есть и те методы которые в нем

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 129 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 148 просмотров
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 72 просмотра
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- вчера
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Cypress «syntax error, unrecognized expression». Что за ошибка и как решить?
- 1 подписчик
- 19 нояб.
- 38 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 39 просмотров
0

ответов
JavaScript

Простой
Как обойти контроль просмотра видео на сайте образовательного ресурса?
- 1 подписчик
- 19 нояб.
- 134 просмотра
3

ответа
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Перерисовать логотип в векторе

22 нояб. 2024, в 00:55

500 руб./за проект

Разработка алгоритма на python (Data engineering)

21 нояб. 2024, в 23:30

300000 руб./за проект

Верстка Flutter + API

21 нояб. 2024, в 22:21

3000 руб./в час

Answer 1 · 2016-06-12 20:55:48

A K @Symphony Куратор тега JavaScript

for( var i = 11; 0 <= i; i-- ){
    answer[i].classList.remove("faq__item-answer-show");
}

Ответ написан более трёх лет назад

4 комментария

Answer 2 · 2016-06-13 06:08:07

var toggle = document.querySelectorAll(".faq__accordion-toggle");
var answer = document.querySelectorAll(".faq__accordion-answer");

  toggle[0].addEventListener("click", function (event){
    event.preventDefault();
    console.log("Клик по ссылки");
    if (answer[0].classList.contains("faq__item-answer-show")) {
      answer[0].classList.remove("faq__item-answer-show");
    } 
    else {
       answer[0].classList.add("faq__item-answer-show");
       for (var i = 1; i <= 11; i++) { //Вот здесь
         answer[i].classList.remove("faq__item-answer-show");
       }
    }
    });

Answer 3 · 2016-06-12 21:08:15

lega @lega

jsfiddle.net/lega911/2qo1gtkx

Ответ написан более трёх лет назад

6 комментариев

Answer 4 · 2016-06-19 17:44:30

Нашел решение, вся трудность была в том чтоб NodeList преобразовать в массив. Кому интересно вот решение:

<!DOCTYPE html>
<html>
<head>
	<title>лишки</title>
	<style>
    .nav-list__item {
      cursor: pointer;
      background-color: yellow;
      color: green

    }
    .nav-list {
      width: 150px;
    }
    .nav-list__item-blue {
      color: blue;
      background-color: orangered;
    }
	</style>
</head>
<body>
  <ul class="nav-list">
  	<li class="nav-list__item  nav-list__item-blue">Пункт меню</li>
  	<li class="nav-list__item">Пункт меню</li>
  	<li class="nav-list__item">Пункт меню</li>
  	<li class="nav-list__item">Пункт меню</li>
  	<li class="nav-list__item">Пункт меню</li>
  </ul>
  <script>
  var link = document.querySelectorAll(".nav-list__item");
  var linkArray = Array.prototype.slice.call(link);
  linkArray.forEach(function(item, index, array){
    linkArray[index].addEventListener("click", function(event) { 
      event.preventDefault(); 
      console.log("клик по пункту меню" + [index]);
      if (!link[index].classList.contains("nav-list__item-blue")) {
        link[index].classList.add("nav-list__item-blue");
        for (i=0; i < linkArray.length; i++) {
          if (i !== index) {
          link[i].classList.remove("nav-list__item-blue");
          }
        }
        
      } else {
        link[index].classList.remove("nav-list__item-blue");
      }
    });
  });
  </script>
</body>
</html>

Как это лучше запрограммировать?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт