jQuery：如何绑定同一类的多个元素？
|
我创建了一个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
});
});
<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-->
没有找到相关结果
已邀请:
4 个回复
迪擅哨乘傅
<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>矾醒忻
采用将仅找到前一个兄弟姐妹，而将找到所有之前的兄弟姐妹。坝镰补翔奋
门锑腺潮
$(\'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 });