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：如果这很重要，我正在使用引导程序 3。

Answer 1

使用类是好的。

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

尝试这个：

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

演示在这里

Answer 2

您可以使用.on()来绑定事件，例如

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