2

ループでこれを行うことは可能ですか?すべてのdivにクリック関数を記述する必要はありませんか?

$("#q1").click(function(){
        $("#ans1").slideToggle("fast");
    });

    $("#q2").click(function(){
        $("#ans2").slideToggle("fast");
    });

    $("#q3").click(function(){
        $("#ans3").slideToggle("fast");
    });

    $("#q4").click(function(){
        $("#ans4").slideToggle("fast");
    });

    $("#q5").click(function(){
        $("#ans5").slideToggle("fast");
    });

    $("#q6").click(function(){
        $("#ans6").slideToggle("fast");
    });

    $("#q7").click(function(){
        $("#ans7").slideToggle("fast");
    });

    $("#q8").click(function(){
        $("#ans8").slideToggle("fast");
    });

すべての ID には、#q8 のようにクリック関数内の ID num と同じ num があり、別の ID #q9、#ans9 を追加する場合、クリック関数を記述する必要はありませんか?

すべてのdivにもクラスがあります...答えが表示されるはずの質問をクリックしたときにどうすればよいか教えてください

<div id="q1" class="question"><span id="q">Q:&nbsp;</span><span id="ul">How Do I Choose a Web Designer?</span></div>
            <div class="answer" id="ans1">some text</div>
4

3 に答える 3

3

できることは..質問と回答の両方をブロックに入れる..言う...

<div class="qa-block">
    <div class="question">Q: How Do I Choose a Web Designer?</div>
    <div class="answer">some text</div>
</div>

次に、スクリプトを ..

$('.question').on('click', function() {
    $(this).closest('.answer').slideToggle('fast');
});

これにより、ソリューションが一般化され、ID の使用が回避されます

お役に立てれば..

于 2013-06-05T09:47:08.893 に答える
1

これは、1 つの関数を使用して以下のように行うことができます。質問の div に属性を追加します data-answerid。どの回答を表示するかが含まれています。この機能を実装するためにすべてを繰り返す必要はありません。

HTML

<div class="question" data-answerid="ans1">
    <span id="q">Q:&nbsp;</span>
    <span id="ul">How Do I Choose a Web Designer?</span>
 </div>
 <div class="answer" id="ans1">some text</div>

<div class="question" data-answerid="ans2">
    <span id="q">Q:&nbsp;</span>
    <span id="ul">How Do I Choose a Web Designer?</span>
 </div>
 <div class="answer" id="ans2">some text</div>

JS

$(".question").click(function(){
    var answer = $(this).data('answerid');
    $("#"+answer).slideToggle("fast");
});

働くフィドル

于 2013-06-05T09:43:40.503 に答える
0

実際には、すべての質問 div にクラスを使用し、次のように記述します。

$('.questionclass').click(function {
   var qnr = this.attr('id');  //gets div ids...
   var anr = qnr.replace(/[^0-9]/g, ''); //strips id of non-numeric characters
   $("#ans"+anr).slideToggle("fast"); //toggles the answer div
});

私はちょっと眠いので、いくつかの間違いがあるかもしれませんが、それはあなたを正しい方向に向けるはずです.

于 2013-06-05T09:38:42.293 に答える