Javascript 如何简化具有多个div的切换函数

在我的网站上，我有一个常见问题页面。有很多问题，我想隐藏，直到有人点击这个问题，然后答案就会出现。我已经有了一个解决方案，我只是觉得这个解决方案太复杂了。我只是找不到一个解决办法，如何使它更容易。你有什么建议吗？看到下面的代码，我希望它是自我解释-如果不只是让我知道-

<script>
            $(document).ready(function() {
                for (var i = 1; i < 11; i++) {
                    answer = document.getElementById("answer" + i);
                    $(answer).hide();
                }
                question1 = document.getElementById("question1");
                question2 = document.getElementById("question2");
                question3 = document.getElementById("question3");
                question4 = document.getElementById("question4");
                question5 = document.getElementById("question5");

                answer1 = document.getElementById("answer1");
                answer2 = document.getElementById("answer2");
                answer3 = document.getElementById("answer3");
                answer4 = document.getElementById("answer4");
                answer5 = document.getElementById("answer5");

                $(question1).click(function() {
                    $(answer1).toggle();
                });
                $(question2).click(function() {
                    $(answer2).toggle();
                });
                $(question3).click(function() {
                    $(answer3).toggle();
                });
                $(question4).click(function() {
                    $(answer4).toggle();
                });
                $(question5).click(function() {
                    $(answer5).toggle();
                });
            });
        </script>

---

编写一个接受问题ID的公共函数。在onclick中调用此方法。

---

将问题放入span/div中，并在函数内获取函数内的元素并调用切换。

编写一个接受问题ID的公共函数。在onclick中调用此方法。

---

将问题放在span/div中，并在函数内获取函数内的元素和调用切换。

例如，您可以这样重写：

$(document).ready(function() {
  for (var i = 1; i < 11; i++) {
    $( '#answer' + i).hide();

    (function( index ) {
      $( '#question' + index ).click( function(){
         $( '#answer' + index ).toggle();
      });
    })( i );
  }
});

您已经在使用jQuery，因此请跳过document.getElementById并在此处使用jQuery选择器。 您正在一次又一次地重复相同的代码。将其移动到循环中。

---

例如，您可以这样重写：

$(document).ready(function() {
  for (var i = 1; i < 11; i++) {
    $( '#answer' + i).hide();

    (function( index ) {
      $( '#question' + index ).click( function(){
         $( '#answer' + index ).toggle();
      });
    })( i );
  }
});

您已经在使用jQuery，因此请跳过document.getElementById并在此处使用jQuery选择器。 您正在一次又一次地重复相同的代码。将其移动到循环中。 给出如下所示的html

<h3><a href="#" onclick="faq_toggle('faq_150');">What is the purpose of site?</a>
<p id="faq_150" style="display: none;">The site to tell about wordpress</p>

或

给出如下所示的html

<h3><a href="#" onclick="faq_toggle('faq_150');">What is the purpose of site?</a>
<p id="faq_150" style="display: none;">The site to tell about wordpress</p>

或

尝试：

尝试：

---

您可以尝试以下代码：

$(function() {  
   $('h3[id^="question"]').on('click', function() {
      $(this).next('div').toggle();
   });    
});

作为旁注，如果您使用html5样板文件，您最初可以简单地使用css隐藏答案，例如

div[id^="answer"] {
   display: none;
}

.no-js div[id^="answer"] {
   display: block;
}

---

其中.no js是为html元素定义的类，并使用脚本（如modernizr）删除。您可以尝试以下代码：

$(function() {  
   $('h3[id^="question"]').on('click', function() {
      $(this).next('div').toggle();
   });    
});

作为旁注，如果您使用html5样板文件，您最初可以简单地使用css隐藏答案，例如

div[id^="answer"] {
   display: none;
}

.no-js div[id^="answer"] {
   display: block;
}

---

其中.no js是为html元素定义的类，并用脚本（例如modernizr）删除。这看起来像是正则表达式的作业

您可以使用正则表达式CSS选择器针对所有问题，然后从id中获取索引并使用它针对适当的答案

$('[id^="answer"]').hide();

$('[id^="question"]').click(function() {
  var index = this.id.replace('question', '');
  $('#answer' + index).toggle();
});

---

使用以下示例测试了此代码

这看起来像是正则表达式的作业

您可以使用正则表达式CSS选择器针对所有问题，然后从id中获取索引并使用它针对适当的答案

$('[id^="answer"]').hide();

$('[id^="question"]').click(function() {
  var index = this.id.replace('question', '');
  $('#answer' + index).toggle();
});

---

使用下面的示例测试了这段代码

使用结构化html和css类将使这段代码变得非常简单

$(document).ready(function(){
    $('.answer').hide();
    $('.question').click(function(){ 
    var holder = $(this).closest('.qaholder');
        $('.answer',holder).toggle();
    });
});

---

查看

上的结构使用结构化html和css类将使这变得非常简单

$(document).ready(function(){
    $('.answer').hide();
    $('.question').click(function(){ 
    var holder = $(this).closest('.qaholder');
        $('.answer',holder).toggle();
    });
});

---

查看位于

的结构，您是否也可以共享html如果您没有遇到特定的问题，那么这个问题可能更适合您是否也可以共享html如果您没有遇到特定的问题，那么这个问题可能更适合我之前尝试过的，但是只出现了最后一个答案，不管我有什么问题clicked@BrigitteFellner这是由于单击事件发生时i的值造成的。为了防止这种情况，可以将循环中的代码包装在一个自执行function@BrigitteFellner这段代码应该可以工作，因为我不在回调函数中。@jcubic，但答案是。@Sirko是的，你说得对，只要检查var i=0；我以前试过，但不管我问的是哪一个问题，只有最后一个答案出现了clicked@BrigitteFellner这是由于单击事件发生时i的值造成的。为了防止这种情况，可以将循环中的代码包装在一个自执行function@BrigitteFellner这段代码应该可以工作，因为我不在回调函数中。@jcubic，但答案是。@Sirko是的，你说得对，只要检查var i=0；我会用use类代替id^=但这是目前为止最好的答案。我会用use类代替id^=但这是目前为止最好的答案。