javascript - jQuery:如何绑定(bind)同一类的多个元素？

Question

我创建了一个 div，我想根据用户点击该 div 下面的一系列链接中的哪个链接来填充不同的嵌入视频。目前，该功能仅适用于列表中的顶部链接。单击第一个链接下的任何链接都不会产生任何效果。这是 JS:

$(document).ready(function(e){
$('a.videoBoxLinks').bind('click',function(e){
var vidUrl = $(this).attr('href');
var vidBox = $(this).prev('.videoBox');
vidBox.html('<iframe src="' + vidUrl + '" width="400" height="300" frameborder="0"></iframe>');
e.preventDefault(); //stops the browser click event
});
});

和 HTML

<div class="videoBox">
<h1>default content to be replaced</h1>
</div>
<a class="videoBoxLinks" href="videoURL1">Test 1</a></br> <!--this one works-->
<a class="videoBoxLinks" href="videoURL2">Test 2</a> <!--this one doesn't-->

Answer 1

而不是

var vidBox = $(this).prev('.videoBox');

使用

var vidBox = $(this).prevAll('.videoBox');

.prev只会找到紧邻的前一个同级，而 .prevAll将找到所有前面的 sibling 。