jquery - 如何使用 JQuery 提供的多个 div 在单击时一次对一个 div 应用切换幻灯片效果？

Question

JS:

$(function () {      
    function runEffect() {           
        var options = {};            
        $(".effect").toggle('slide', options, 500/*time*/);
    };
    $(".button").click(function () {
        runEffect();
        return false;
    });
});

HTML:

<div class="riddle1">
<div class="riddle-answer"> 
        <a href="#" class="button" style="float:left;">
         <img src="" width="45" height="112" title="" alt="Answer" /></a>
        <div class="effect">    
        <p>Test riddle Test riddle Test riddle Test riddle Test riddle Test riddle</p>
       </div>
</div>

<div class="riddle-top"></div>

<div class="riddle-mid">
 <p>If three cats catch three mice in three minutes, how many cats would be needed to catch 100 mice in 100 minutes? </p>
</div>

<div class="riddle-bot"></div>

riddle2 还有另一个 div 与上面相同，但是现在当单击链接图像时，它会将切换效果应用于两个框或 DIV - riddle1 和 riddle2。如果使用按钮和效果作为 id 而不是类，则可以将切换效果仅应用于一个 DIV。那么如何才能同时对两者应用切换效果，但一次只能对一个效果应用。

Answer 1

这是因为您在选择 $(".effect") 时不使用上下文，因此它会选择文档中具有类 effect 的所有元素。

这是一种能够在 runEffect() 方法中使用上下文进行选择的方法:

• 在点击处理程序中 e.currentTarget是当前冒泡阶段的元素

• 将其作为参数传递给 runEffect() 方法

• 在runEffect()方法中，用它来查询对应的“.effect”元素

代码如下:

$(function () {      
    function runEffect(context) {         
        var options = {};            
        $(context).siblings('.effect').toggle('slide', options, 500/*time*/);
    };
    $(".button").click(function (e) {
        runEffect(e.currentTarget);
        return false;
    });
});​

<强> DEMO