如何解决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
});
});
和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-->
解决方法
检查以下代码。这个对我有用。
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>
,代替
var vidBox = $(this).prev(\'.videoBox\');
采用
var vidBox = $(this).prevAll(\'.videoBox\');
.prev
将仅找到前一个兄弟姐妹,而.prevAll
将找到所有之前的兄弟姐妹。,您可能要使用委托。绑定仅绑定单个事件,而委托仅添加事件侦听器。
那至少应该让您入门。,我会这样
$(\'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
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。