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

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

Средний
Как сделать swiper autoplay с несколькими видео?
- 1 подписчик
- 4 часа назад
- 33 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Почему неправильное время в Java Script?
- 1 подписчик
- 4 часа назад
- 44 просмотра
0

ответов
JavaScript

Простой
Как получить родителя с определенным атрибутом?
- 1 подписчик
- 6 часов назад
- 21 просмотр
1

ответ
JavaScript

Простой
Есть ли какой нибудь полифил для importmap?
- 1 подписчик
- 11 часов назад
- 45 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Ошибка three на редми ноте 7 как решить?
- 1 подписчик
- 13 часов назад
- 71 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Какой тип данных у RegExp, TypedArray и других?
- 1 подписчик
- 16 часов назад
- 110 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- 18 часов назад
- 66 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Google блокирует запрос на вход,что делать?
- 2 подписчика
- 20 часов назад
- 243 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- вчера
- 62 просмотра
0

ответов
JavaScript

Простой
На каком JS фреймворке сделан фронт wildberries.ru?
- 1 подписчик
- вчера
- 248 просмотров
2

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

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

До 220 000 ₽

Периодически возникает ошибка при включении сайта на open server

25 дек. 2024, в 02:45

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

Разработать нативное приложение под iOS

25 дек. 2024, в 00:52

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

Правки WP

24 дек. 2024, в 23:35

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

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>

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

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

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

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