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 );
  }
});

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

Answer 3

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

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

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

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

使用以下示例http://jsfiddle.net/B6CBq/1/

测试此代码

Answer 4

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

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

查看http://jsfiddle.net/yCYFT/

的结构

Answer 5

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

Answer 6

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

尝试：

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

如何简化具有许多div的切换功能

7 个答案: