Как упростить код javascript?

Question

[DioNice77]

Доброго времени суток! Помогите пожалуйста немного разобраться, а именно в том как упростить код js. Я точно знаю что его можно упростить, скорее всего с помощью цикла for, но что то не получается.

Answer 1

[xmoonlight]

Это вообще без JS делается: тут.

Comments

[xmoonlight]

OML_KVLT, это инлайн js )
но тоже круто! Плюсую!

Answer 2

[Mysterion]

var buttons = document.getElementsByClassName('buttons');
var divClass = document.getElementsByClassName('divClass');
for (var i = 0; i < buttons.lenght; i++) {
    buttons[i].addEventListener('click', function() {
        divClass[i].classList.toggle('divHide');
        if (buttons[i].value == 'Продолжить...')
            buttons[i].value = 'Свернуть...';
        else
            buttons[i].value = 'Продолжить...';
    });
}

Comments

[DioNice77]

Как раз вот так я и делал сначала, но не работает(

[mahmudchon]

1. Ошибка в слове length.
2. В теле функции скрипт уже не видит переменную i.

[DioNice77]

mahmudchon, Спасибо) у меня было предположение что i теряется.. Но не могу сообразить как сделать так чтоб не терялась...

[mahmudchon]

DioNice77, в любом случае, есть еще 2 решения, которые лучше. В идеале - без JS вовсе, как указано.

Answer 3

[profesor08]

Comments

[DioNice77]

Это я пока не очень понимаю... Но всё работает, спасибо)

[profesor08]

DioNice77, в цикле обрабатываешь все разом, иестественно может записать это одной строкой или сжать.

const spoilers=Array.from(document.querySelectorAll(".spoiler"));for(const e of spoilers){const s=e.querySelector(".spoiler-toggle");s.addEventListener("click",()=>{e.classList.contains("is-active")?(e.classList.remove("is-active"),s.innerHTML="Show"):(e.classList.add("is-active"),s.innerHTML="Hide")})}

Answer 4

[coderisimo]

const divClass = document.getElementsByClassName("divClass");
Array.from(document.getElementsByClassName("buttons")).forEach(function( button) {
  button.addEventListener("click", function() {
    divClass[this.getAttribute("related")].classList.toggle("divHide");
    this.value = this.value === "Свернуть" ? "Продолжить": "Свернуть";  });});

Comments

[DioNice77]

Спасибо, ваше решение мне более понятно)

[coderisimo]

DioNice77, основная идея - подобный код выносить в отдельный метод. ) Удачи!

[coderisimo]

OML_KVLT, он возвращает HTMLCollection( array-like object) , для которого , просто forEach не работает. Однако, если очень хотца, то можно

.Although NodeList is not an Array, it is possible to iterate over it with forEach(). It can also be converted to a real Array using Array.from()

Answer 5

[SagePtr]

Вот пример вообще на чистом CSS, без единого JS (даже в атрибутах):