Question

我有以下脚本在我的页面上多次出现。我有一个简单的幻灯片切换附加到<div class="info">并由<a rel="viewinfo">标记控制，但是当我点击锚点时，所有带有类信息的div都会滑动。

这是HTML / PHP

<div class="couplistMeta">
    <a class='view' rel="viewinfo" href="#">View Coupon</a>
    <a class="print" href="#">Print</a>
</div>
<div class="info">
    <p><?php echo $rec2[4]."&nbsp;&nbsp;--&nbsp;&nbsp;Phone:&nbsp;&nbsp;".$rec2['phone']; ?></p><p><?php echo $rec2['address']."&nbsp;&nbsp;--&nbsp;&nbsp;".$rec2['city'].",&nbsp;".$rec2['state']."&nbsp;".$rec2['zip']; ?></p>
</div>

这是Javascript

$(document).ready(function() {
    $('div.info').hide();
    $("a[rel='viewinfo']").click(function() {
            $('div.info').slideToggle(400);
            return false;
    });
});

我尝试使用$(this).next('div.info').slideToggle(400);，但这只是打破了效果。所以$('div.info')过于笼统，我怎样才能更具体地了解JS？

Answer 1

试试这个：

$(document).ready(function() {
    $('div.info').hide();
    $("a[rel='viewinfo']").click(function() {
        $(this).parent().next('.info').slideToggle(400);
        return false;
    });
});

问题归因于$('div.info')隐式迭代页面上div类的所有info元素。

SlideToggle的多个实例，用于切换所有内容

1 个答案: