如何在相同的类名中单独为选中元素设置JS

很多时候,我发现对一个类名添加事件,每次都是所有同类名元素一起触发,使用 this可以仅对当前选中的元素应用事件

   $('.guowai button').click(function() {
        /* Act on the event */
        var a = $(this).parent().find('.secguowai');
        a.animate({height: '307px', marginTop: '-305px'}, 500);
    });
    $('.secguowai span').click(function() {
        /* Act on the event */
        var a = $(this).parents('.secguowai')
        a.animate({height: '0', marginTop: '0'}, 500);
    });
                             <div class="guowai" id="guowai">
                                <div>
                                    <img src="./image/kingsmanknight.jpg">
                                    <a href="#">成为王牌特工</a>
                                    <button type="button" name="button">.<br>.<br>.</button>
                                    <p>你有什么需要成为王牌特工?在这个互动世界中完成任务,以赚取你的方式。</p>
                                    <div class="secguowai">
                                        <h2>成为王牌特工<span>x</span></h2>
                                        <p>你有什么需要成为王牌特工?在这个互动世界中完成任务,以赚取你的方式。</p>
                                    </div>
                                </div>
                                <div>
                                    <img src="./image/wildflower.jpg">
                                    <a href="#">野花</a><button type="button" name="button">.<br>.<br>.</button>
                                    <p>你想通过发送一个独特的野花在情人节表达。</p>
                                    <div class="secguowai">
                                        <h2>成为王牌特工<span>x</span></h2>
                                        <p>你有什么需要成为王牌特工?在这个互动世界中完成任务,以赚取你的方式。</p>
                                    </div>
                                </div>
                                <div>
                                    <img src="./image/nikelidyana.jpg">
                                    <a href="#">耐克GEC kendini</a><button type="button" name="button">.<br>.<br>.</button>
                                    <p>一个互动的、好玩的视频体验促进女子2015夏季风格。游客可以购物,分享和获得灵感及这个反应的网站。
                                        <div class="secguowai">
                                        <h2>成为王牌特工<span>x</span></h2>
                                        <p>你有什么需要成为王牌特工?在这个互动世界中完成任务,以赚取你的方式。</p>
                                    </div>
                                </div>
                            </div>

  

在该例子中,为了使按钮和span的方法仅对选中模块生效,使用了遍历的方法,这样,内容的滑入滑出仅在当前模块生效。

猜你喜欢

转载自www.cnblogs.com/zhougm/p/11107508.html
今日推荐