javascript - 动态事件处理程序

Question

我想为每个“按钮”类都有一个动态事件处理程序。处理程序必须在单击时显示“邻居”列的内容。我正在考虑用类来标记内容，例如“图片内容”、“视频内容”，当循环所有按钮类时，第一个“图片内容”或“视频内容”类将成为点击时显示的目标。或者有没有更好的..更平滑的解决方案？

<div class="row">
    <div class="col-md-7" >
        <div class="col-md-11 col-md-offset-1" >
            <div class="col-md-12">
                <p class="news line">
                <!-- Button for displaying Video content --> 
                <a href="javascript:void(0);" class="button"> Show</a> 
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-5" >
        <div class="col-md-11 video">
            <div class="col-md-12 video-content">
            <!-- Video content -->
            </div>
        </div>
    </div>
</div>

Ps:我正在使用 bootstraps 3，如果这很重要的话。

Answer 1

使用类很好。

您的模式应该是获取父级 .row，然后从那里获取 .video-content。

试试这个:

$('.button').on('click',function(){
    $(this).closest('.row').find('.video-content,.picture-content').show();
});

演示 here