Блог

У меня есть такой небольшой код javascript (я использую его в Markdown):

 lt;button title="Click to show answer" type="button" class="btn btn-primary"  onclick="if(document.getElementById('spoiler') .style.display=='none')  {document.getElementById('spoiler') .style.display=''}  else{document.getElementById('spoiler') .style.display='none'}"gt;  show/hide lt;/buttongt;lt;div id="spoiler" style="display:none"gt; ***  Hidden Text  *** lt;/divgt;  

Проблема в том, что если я хочу сделать несколько кнопок на одной странице, чтобы скрыть текст, то мне нужно переименовать спойлер в spoilerN 4 раза

Вопросы:

1. (Минимум) Можно ли компактно вывести идентификатор в отдельную переменную в этом фрагменте кода?
2. (Максимум) Можно ли автоматически сгенерировать переменную? Чтобы сам код повторно использовал переменную каждый раз, когда объявляется новая кнопка?

Вам было бы лучше отказаться от встроенного стиля И javascript и сделать это в css с помощью некоторого javascript для управления добавлением.удалением классов css.

Предполагая, что кнопка всегда является родственным элементом div-спойлера, вы можете сделать это, просто указав класс в div-спойлере и автоматически прикрепив его к каждому экземпляру на странице:

 document.querySelectorAll(".spoiler").forEach(s =gt; {  s.previousSibling.addEventListener("click", () =gt; {  s.classList.toggle("show");  }); }) 

 .spoiler{  display:none } .show{  display:block } 

 lt;button title="Click to show answer" type="button" class="btn btn-primary"gt;   show/hide lt;/buttongt;lt;div class="spoiler"gt; ***  Hidden Text  *** lt;/divgt; 

Ответ Джейми оказался очень похожим на правду! Спасибо!

Но в Markdown мы с коллегами внесли ряд небольших правок, потому что решение не сработало сразу. Рабочая версия выглядит так:

Первый фрагмент (один, в начале документа (или в файле style.css для всех файлов Rmd в раскрывающемся списке)):

 .spoiler{  display:none } .show{  display:block }  

Вторая часть (на самом деле скрытые тексты)

 lt;button title="Click to show answer" type="button" class="btn btn-primary"gt;   show/hide lt;/buttongt;lt;div class="spoiler"gt; ***  Hidden Text  *** lt;/divgt;  

 lt;button title="Click to show answer" type="button" class="btn btn-primary"gt;   show/hide lt;/buttongt;lt;div class="spoiler"gt; ***  Hidden Text2  *** lt;/divgt;  

Третья часть (одна, в самом конце файла Rmd) Изменено предыдущее значение на предыдущее значение элементов

 document.querySelectorAll(".spoiler").forEach(s =gt; {  s.previousElementSibling.addEventListener("click", () =gt; {  s.classList.toggle("show");  }); })  

Спасибо вам за вашу помощь!