javascript - 如何使用许多 div 简化切换功能

Question

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

<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>

Answer 1

你可以试试这段代码：

$(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）

Answer 2

例如，您可以像这样重写：

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

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

1. 您已经在使用 jQuery，因此请跳过document.getElementById()并在此处使用 jQuery 选择器。
2. 您一遍又一遍地重复相同的代码。将其移至循环。

Answer 3

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

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

查看http://jsfiddle.net/yCYFT/的结构

Answer 4

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

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

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

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

使用以下示例http://jsfiddle.net/B6CBq/1/测试了此代码

Answer 5

给出如下的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>

Javascript函数如下

function faq_toggle(id) {
        var e = document.getElementById(id);
    e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}

或者

function faq_toggle(id) {
        $('#'+id).toggle();
}

Answer 6

尝试：

for (var i = 1; i < 11; i++) {
    (function(answer) {
        $("#question" + i).click(function() {
            answer.toggle();
        });
    })($("#answer" + i).hide());
}

Answer 7

编写一个接受问题 ID 的通用函数。在 onclick 中调用此方法。将问题放在 span/div 中并在函数内部获取函数内部的元素并调用切换。