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。那么如何才能同时对两者应用切换效果,但一次只能对一个效果应用。
最佳答案
这是因为您在选择 $(".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
关于jquery - 如何使用 JQuery 提供的多个 div 在单击时一次对一个 div 应用切换幻灯片效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9431198/