Javascript jQuery：如何绑定同一类的多个元素？

我已经创建了一个div，我想用一个不同的嵌入式视频填充该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
});
});

$（文档）.ready（函数（e）{
$（'a.videoBoxLinks'）.bind（'click'，函数（e）{
var vidUrl=$（this.attr（'href'）；
var vidBox=$（this.prev（'.videoBox'）；
html（“”）；
e、 preventDefault（）；//停止浏览器单击事件
});
});

还有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-->

要替换的默认内容

您可能需要使用委托。Bind只绑定单个事件，而delegate只添加事件侦听器

这至少可以让你开始了。

而不是

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

使用

---

只会找到前面的兄弟姐妹，而会找到前面的所有兄弟姐妹。

我会这样做

$('a.videoBoxLinks').bind('click',function(e){
    link = $(this);
    // if the iframe does not exists
    if ($('div.videoBox iframe').length == 0) {
        // create the iframe
        $('div.videoBox').html('<iframe width="400" height="300" frameborder="0"></iframe>');
    }
    // set the source of the iframe
    iframe = $('div.videoBox iframe').attr('src', link.attr('href'));
    e.preventDefault(); //stops the browser click event
});

$（'a.videoBoxLinks'）.bind（'click'，函数（e）{
link=$（此项）；
//如果iframe不存在
if（$（'div.videoBox iframe'）。长度==0）{
//创建iframe
$（'div.videoBox'）.html（“”）；
}
//设置iframe的源
iframe=$（'div.videoBox iframe'）.attr（'src'，link.attr（'href'））；
e、 preventDefault（）；//停止浏览器单击事件
});

检查以下代码。它对我有用

HTML:

<div id="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>

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

</script>

要替换的默认内容

脚本：

<div id="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>

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

</script>

$（文档）.ready（函数（e）{
$（'a.videoBoxLinks'）.bind（'click'，函数（e）{
var vidUrl=$（this.attr（'href'）；
//var vidBox=$（this.prev（'.videoBox'）；
$（“#视频框”）.html（“”）；
e、 preventDefault（）；//停止浏览器单击事件
});
});

因此，如果在第一个链接之前单击第二个链接，它仍然没有任何作用？我之前接受了Rahul的以下回答，但当我开始处理布局时，我将链接列表放入一个表中，结果发现它不再起作用。事实证明，prevAll（）只找到兄弟姐妹——Rahul指出了这一点（我忘了！）。此解决方案适用于具有目标ID的所有元素，这正是我所需要的。谢谢