所以我正在构建一个FAQ页面，我想要一个带有问题的可点击div来显示答案。我写了下面的代码，它很有效，但无论如何都不是最优的，因为我为每个div都有一个函数。我如何简化和优化这些代码？我本来想用for循环，但中途迷路了。
这是html:
注意1：请不要介意内联样式，我计划将这些样式移到样式表中，但我是独立测试的。
注意2:{% include tags %}来自液体变量，后端将正确渲染这些变量，因此请忽略它们。
<div id="question-container1" style="padding: 40px 0 20px 0;" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq1()">
<h3 style="text-align: center; color: #115939; padding-top: 60px;">1. ¿Cuándo recibiré mi terrario?</h3>
<span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
<p id="esconder_faq1" style="display: none; padding: 20px; text-align: center; color: #115939;">Estaremos enviando los terrarios en la primera semana de diciembre.</p>
</div>
<div id="question-container2" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq2()">
<h3 style="text-align: center; color: #115939;">2. ¿Cómo funciona el envío con plantas?</h3>
<span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
<p id="esconder_faq2" style="display: none; padding: 20px; text-align: center; color: #115939;">Utilizamos envío de UPS para el día siguiente, esto para que las plantas no pasen tanto tiempo en el traslado. Todos pedidos serán envíados de lunes a miércoles, esto para evitar ante cualquier percance, que las plantas pasen el fin de semana en las instalaciones de la mensajería. El envío no tiene costo.</p>
</div>
<div id="question-container3" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq3()">
<h3 style="text-align: center; color: #115939;">3. ¿Cómo lo armo?</h3>
<span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
<p id="esconder_faq3" style="display: none; padding: 20px; text-align: center; color: #115939;">Te recomendamos armar tu terrario tan pronto lo recibas o colocar las plantas en una maceta para utilizarlas más adelante. Recuerda que puedes agregar más plantas ya estando armado el terrario. Sigue las instrucciones incluídas, o visita este <a href="">link.</a></p>
</div>
<div id="question-container4" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq4()">
<h3 style="text-align: center; color: #115939;">4. ¿Qué tipos de pago aceptan?</h3>
<span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
<p id="esconder_faq4" style="display: none; padding: 20px; text-align: center; color: #115939;">Aceptamos pagos con tarjeta de crédito, débito, PayPal, pagos en efectivo en Oxxo o transferencia interbancaria SPEI.</p>
</div>这里是javascript
const despliegueFaq1 = () => {
let x = document.getElementById ('esconder_faq1');
if (x.style.display === "none"){
x.style.display = "block";
} else {
x.style.display = "none";
}
}
const despliegueFaq2 = () => {
let x = document.getElementById ('esconder_faq2');
if (x.style.display === "none"){
x.style.display = "block";
} else {
x.style.display = "none";
}
}
const despliegueFaq3 = () => {
let x = document.getElementById ('esconder_faq3');
if (x.style.display === "none"){
x.style.display = "block";
} else {
x.style.display = "none";
}
}
const despliegueFaq4 = () => {
let x = document.getElementById ('esconder_faq4');
if (x.style.display === "none"){
x.style.display = "block";
} else {
x.style.display = "none";
}
}
在Javascript代码中，除了id(如esconder_faq1、esconder_faq2。。。
因此id是由esconder_faq前缀和数字组成的。
因此，您可以创建一个新函数来检索该索引号作为param，并使用该number来获得类似"esconder_faq" + index的id，如下所示。
在html上，可以调用索引号为onclick=despliegueFaq(1)的函数。
const despliegueFaq = (index) => {
let x = document.getElementById('esconder_faq' + index);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}<div id="question-container1" style="padding: 40px 0 20px 0;" class="question-lillipot preguntas-lillipot"
onclick="despliegueFaq(1)">
<h3 style="text-align: center; color: #115939; padding-top: 60px;">1. ¿Cuándo recibiré mi terrario?</h3>
<span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
<p id="esconder_faq1" style="display: none; padding: 20px; text-align: center; color: #115939;">Estaremos enviando los
terrarios en la primera semana de diciembre.</p>
</div>
<div id="question-container2" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);"
class="question-lillipot preguntas-lillipot" onclick="despliegueFaq(2)">
<h3 style="text-align: center; color: #115939;">2. ¿Cómo funciona el envío con plantas?</h3>
<span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
<p id="esconder_faq2" style="display: none; padding: 20px; text-align: center; color: #115939;">Utilizamos envío de
UPS para el día siguiente, esto para que las plantas no pasen tanto tiempo en el traslado. Todos pedidos serán
envíados de lunes a miércoles, esto para evitar ante cualquier percance, que las plantas pasen el fin de semana en
las instalaciones de la mensajería. El envío no tiene costo.</p>
</div>
<div id="question-container3" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);"
class="question-lillipot preguntas-lillipot" onclick="despliegueFaq(3)">
<h3 style="text-align: center; color: #115939;">3. ¿Cómo lo armo?</h3>
<span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
<p id="esconder_faq3" style="display: none; padding: 20px; text-align: center; color: #115939;">Te recomendamos armar
tu terrario tan pronto lo recibas o colocar las plantas en una maceta para utilizarlas más adelante. Recuerda que
puedes agregar más plantas ya estando armado el terrario. Sigue las instrucciones incluídas, o visita este <a
href="">link.</a></p>
</div>
<div id="question-container4" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);"
class="question-lillipot preguntas-lillipot" onclick="despliegueFaq(4)">
<h3 style="text-align: center; color: #115939;">4. ¿Qué tipos de pago aceptan?</h3>
<span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
<p id="esconder_faq4" style="display: none; padding: 20px; text-align: center; color: #115939;">Aceptamos pagos con
tarjeta de crédito, débito, PayPal, pagos en efectivo en Oxxo o transferencia interbancaria SPEI.</p>
</div>这里的简单解决方案是使用class来识别您感兴趣对其执行此操作的所有div。假设您将每个div命名为class名称question:
<div class="question" id="question-container1" style="padding: 40px 0 20px 0;" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq1()">
<h3 style="text-align: center; color: #115939; padding-top: 60px;">1. ¿Cuándo recibiré mi terrario?</h3>
<span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
<p id="esconder_faq1" style="display: none; padding: 20px; text-align: center; color: #115939;">Estaremos enviando los terrarios en la primera semana de diciembre.</p>
</div>
<div class="question" id="question-container2" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq2()">
<h3 style="text-align: center; color: #115939;">2. ¿Cómo funciona el envío con plantas?</h3>
<span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
<p id="esconder_faq2" style="display: none; padding: 20px; text-align: center; color: #115939;">Utilizamos envío de UPS para el día siguiente, esto para que las plantas no pasen tanto tiempo en el traslado. Todos pedidos serán envíados de lunes a miércoles, esto para evitar ante cualquier percance, que las plantas pasen el fin de semana en las instalaciones de la mensajería. El envío no tiene costo.</p>
</div>
<div class="question" id="question-container3" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq3()">
<h3 style="text-align: center; color: #115939;">3. ¿Cómo lo armo?</h3>
<span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
<p id="esconder_faq3" style="display: none; padding: 20px; text-align: center; color: #115939;">Te recomendamos armar tu terrario tan pronto lo recibas o colocar las plantas en una maceta para utilizarlas más adelante. Recuerda que puedes agregar más plantas ya estando armado el terrario. Sigue las instrucciones incluídas, o visita este <a href="">link.</a></p>
</div>
<div class="question" id="question-container4" style="padding: 40px 0 20px 0; border-top: 1px solid rgba(17,89,57,.3);" class="question-lillipot preguntas-lillipot" onclick="despliegueFaq4()">
<h3 style="text-align: center; color: #115939;">4. ¿Qué tipos de pago aceptan?</h3>
<span style=" display: block; text-align: center; margin: 0 auto;">{% include 'icon-chevron-down' %}</span>
<p id="esconder_faq4" style="display: none; padding: 20px; text-align: center; color: #115939;">Aceptamos pagos con tarjeta de crédito, débito, PayPal, pagos en efectivo en Oxxo o transferencia interbancaria SPEI.</p>
</div>
那么，重构这段代码所需要做的就是：
let questions = document.getElementsByClassName("question");
for (var i=0;i<questions.length;i++) {
var x = questions[i];
if (x.style.display === "none"){
x.style.display = "block";
} else {
x.style.display = "none";
}
};
此时，您还可以重新评估是否真的需要所有这些单独的id值。如果你不需要单独识别它们，那么为了简单起见，去掉它们可能是值得的。