HTML

Question

是否可以通过循环执行此操作，因此我不必为每个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的num都与click函数内的id num相同比如＃q8有ans＃8 如果我添加另一个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>

Answer 1

可以做的是...... 将你的问题和答案放在一个块中.. 说......

<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

希望这会有所帮助..

Answer 2

您可以使用一个功能执行以下操作。在问题div data-answerid中添加一个attribut。它包含要显示的答案。您无需重复所有操作即可实现此功能。

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

Working Fiddle

Answer 3

我实际上为所有问题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
});

我有点困，所以可能会有一些错误，但它应该指向正确的方向。

带有slidetoggle的jquery循环动画

3 个答案:

HTML

JS