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

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 ещё

Простой
Как сделать возможность посадить элемент при Drag'n'Drop на определенное место?
- 2 подписчика
- 12 часов назад
- 35 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Можно ли использовать script и как модуль и как «просто» скрипт?
- 1 подписчик
- 16 часов назад
- 72 просмотра
2

ответа
JavaScript

Простой
Как привязать плагин Hotspot к фоновому изображению div?
- 1 подписчик
- 19 часов назад
- 29 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему разные 64 битные числа считаются одинаковыми?
- 1 подписчик
- вчера
- 137 просмотров
2

ответа
JavaScript

Простой
Почему then cрабатывает после того как Promise.resolve был вызван?
- 1 подписчик
- вчера
- 130 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как в webapp telegram вызвать камеру для отправки фото?
- 1 подписчик
- вчера
- 81 просмотр
0

ответов
JavaScript

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

ответ
JavaScript

+2 ещё

Средний
Как динамически подключать/отключать модули микрофронтенда на продакшене?
- 1 подписчик
- вчера
- 44 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как можно получить доступ к переменной, которая находится в другой функции?
- 1 подписчик
- вчера
- 235 просмотров
3

ответа
JavaScript

+2 ещё

Простой
Как настроить опрос прибора по modbus через nodejs?
- 1 подписчик
- вчера
- 81 просмотр
0

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

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

SummerWeb • Ярославль

от 120 000 до 180 000 ₽

JavaScript Developer (backend / fullstack)

Brightdata • Тель-Авив

от 5 500 до 6 500 $

Fullstack-разработчик (JavaScript)

Market-place • Ростов-на-Дону

от 100 000 до 200 000 ₽

Доработка админки для обменника валюты - back-end PHP yii2

21 июн. 2024, в 08:53

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

Запустить тренировку нейронной сети на Google Colab TPU

21 июн. 2024, в 07:19

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

Создать простую базу на 1С

21 июн. 2024, в 06:55

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

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>

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

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

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

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