1

私のウェブサイトには、よくある質問のページがあります。誰かが質問をクリックするまで非表示にしたい質問がたくさんあります。その後、回答が表示されます。私はすでに解決策を持っていますが、この解決策は複雑すぎると感じています。簡単にするための解決策が見つかりません。何か提案はありますか？以下のコードを参照してください。それが自明であることを願っています-そうでない場合は、私に知らせてください;-)

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

7 に答える 7

1

構造化された html および css クラスを使用すると、これが非常に簡単になります

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

http://jsfiddle.net/yCYFT/で構造を確認してください。

于 2013-08-27T13:16:56.383 に答える
1

これは正規表現の仕事のように見えます!

正規表現 CSS セレクターを使用してすべての質問を対象にし、ID からインデックスを取得して、それを使用して適切な回答を対象にすることができます。

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

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

次の例でこのコードをテストしましたhttp://jsfiddle.net/B6CBq/1/

于 2013-08-27T12:58:58.617 に答える