MarvinJan

Question

Веб-разработка
+2 ещё

Простой

Можно ли достичь уровня middle в разработке без опыта в офисе?

4 подписчика
более трёх лет назад
3925 просмотров

6

ответов

Answer 1 · 2019-07-06 11:08:23

Изначальный код вызывает некоторые вопросы конечно, тем не менее, так должно работать - https://codepen.io/marvinjan/pen/RzYBMm .

Изменения которые внес закомментированы между TOSTER CODE и TOSTER CODE END.

Answer 2 · 2019-07-05 15:58:59

Во-первых, $("h1") это не js а jQuery, который может быть не подключен. Во вторых, подобная конструкция и ее аналог в js вернут не один элемент, а значит и действовать надо с каждым. Js код выглядел бы так

const h1s = document.querySelectorAll("h1");
h1s.forEach( h => h.removeAttribute("style"));

Однако, подобный подход к решению данной конкретной задачи неприемлим, из за лишней нагрузки на сайт/приложение. В вашем случае необходимо менять то, что отправлено сервером.
То есть использовать/править php.

Answer 3 · 2019-07-06 12:52:30

Ваш код работает, но его можно слегка улучшить,

if(fas.classList.contains("fa-plus-circle")){
      fas.classList.remove("fa-plus-circle");
    }
    else{
      fas.classList.add("fa-plus-circle");
    }

вот это, раз уж вы используете toggle в коде, можно поменять на fas.classList.toggle("fa-plus-circle");

Далее,

var acc = document.getElementsByClassName("event-accordion-item");

Можно записать как

var acc = document.querySelectorAll(".event-accordion-item");

И вместо объявления i и использования for i сделать так

acc.forEach( function(acc) {
// Функционал
})

Можно сделать также и при использовании getElementsByClassName, но в таком случае нужно будет acc преобразовать в массив, при помощи Array.from( acc ) . Все потому, что getElementsByClassName возвращает HTMLcollection, у которой нет родного метода forEach, а querySelectorAll вернет NodeList, у которого метод forEach есть.

Мой вариант итогового кода

var acc = document.querySelectorAll(".event-accordion-item");
 
acc.forEach( function(acc) {

  acc.addEventListener("click", function() {

    this.classList.toggle("active");
    var fas = this.querySelector('.eventAccordion-icon');
    fas.classList.toggle("fa-plus-circle")
    fas.classList.toggle("fa-minus-circle");
    
    var panel = this.nextElementSibling;

    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
       panel.style = 'margin-top: 0px; margin-bottom: 0px';
    } else {
       panel.style = 'margin-top: 25px; margin-bottom: 25px';
      panel.style.maxHeight = panel.scrollHeight + "px";

    } 
  });
});

Answer 4 · 2019-07-07 08:49:14

Добрый день. Логика вашего скрипта работает не так как вы описали. Клон появляется сразу после загрузки страницы и клонированная кнопка не имеет на себе никаких событий. В любом случае, не советую вам исправлять эту ошибку, а лучше поменять подход в целом - при скролле менять стиль основного хедера, а не плодить клонов.

Если же так нужен клон, то даже исправив логику скрипта, вам каждый раз нужно будет инициировать нужный функционал на клон-кнопку, так как клонов будет много (и их надо будет удалять).