Кнопки развернуть или свернуть все
в документе


Я <button>что при нажатии развернуть или свернуть содержимое всех <details> в рамках документа. Код работает, но как новичок в JavaScript, я не очень уверен в его производительности и/или эффективности. Не могли бы вы, пожалуйста, рассмотреть его.

expandDetBtn = document.getElementById("showBtn");
collapseDetBtn = document.getElementById("hideBtn");

expandDetBtn.addEventListener("click", function expandDetails(x) {
  var x = document.getElementsByTagName("details");
  var i;
  var len = x.length;
  for (i = 0; i < len; i++) {
    if (x[i].open == false) {
      x[i].setAttribute("open", "true");
    }
  }
});

collapseDetBtn.addEventListener("click", function expandDetails(x) {
  var x = document.getElementsByTagName("details");
  var i;
  var len = x.length;
  for (i = 0; i < len; i++) {
    if (x[i].open) {
      x[i].removeAttribute("open");
    }
  }
});
<button id="showBtn">Show details</button>
<button id="hideBtn">Hide details</button>

<details>
  <summary>Section 1</summary>
  <p>Text 1</p>
</details>

<details>
  <summary>Section 2</summary>
  <p>Text 2</p>
</details>

<details>
  <summary>Section 3</summary>
  <p>Text 3</p>
</details>



96
0
задан 15 апреля 2018 в 07:04 Источник Поделиться
Комментарии
1 ответ

Производительность-мудрый код нормально. Нет действительно ничего, чтобы улучшить. У меня несколько иные комментарии по поводу кода.

Вы обращаетесь к DOM-элементам на старте, без проверки, если они были загружены. Как правило, они не, которые могли бы привести здесь ошибка.

Вы сможете назвать вашу функцию-обработчик, но не относятся к ним. Вы можете просто использовать здесь анонимную функцию. Вы также не используете x параметр.

Не использовать varиспользуйте let и const вместо.

x это не очень описательное имя. Он также переписывает выходе параметра.

Нет необходимости, чтобы сохранить длину в переменную. Вы также не нужно декларировать i перед началом цикла, так как он не используется снаружи.

Нет необходимости, чтобы проверить, если они уже открыты или закрыты. Открытие уже Открытого, не делать ничего, так просто открыть их все.

Не использовать "true" здесь .setAttribute("open", "true");. По данным этого.


Логические атрибуты считаются истинными, если они присутствуют на
элемент на всех, вне зависимости от их фактической величины; как правило, вы
следует указать пустую строку ( "" ), в значение

Результат будет тот же, но это может привести людей поверить, что значение "false" удалим его, что это не так.

С учетом всех этих изменений, открытие выглядеть так

expandDetBtn.addEventListener("click", function() {
const elements = document.getElementsByTagName("details");
for (let i = 0; i < elements.length; i++) {
elements[i].setAttribute("open", "");
}
});

Если вы хотите получить более продвинутых можно использовать одну функцию, так как они очень похожи.

function toggleDetails(open) {
for(element of document.getElementsByTagName("details")) {
element.open = open;
}
}

expandDetBtn.addEventListener("click", toggleDetails.bind(null, true));
collapseDetBtn.addEventListener("click", toggleDetails.bind(null, false));

1
ответ дан 16 апреля 2018 в 01:04 Источник Поделиться