使用attr（）方法的JQuery对象/嵌入元素问题

我试图交换此embed元素的src值的值，取决于click事件。
它适用于firefox和opera，但不适用于safari，chrome或IE。

$('.scrollableArea a').click(function() { //retract id from selected anchor, and create + append new video parameter values. var newVideoVal = 'http://www.youtube.com/v/' + $(this).attr("id") + '?version=3&autoplay=1'; $('#gallery_content object param').attr('value', newVideoVal); $('#gallery_content object embed').attr('src', newVideoVal); }); 

如果我在click事件函数中控制了以下内容：

 console.log($('#gallery_content embed').attr("src")); 

对于每个单击事件，控制台返回src的值，具有交替的锚点id值，例如。
http://www.youtube.com/v/videoidhere?version=3&autoplay=1

–

这是一个浏览器问题吗？
操纵object / embed元素的问题？
难道我做错了什么？ （大概！）

Answer 1

可能是因为你覆盖了一个你不想要的param元素：

 $('#gallery_content object param[name="movie"]').attr(...); 

可能会为你做的伎俩。 嵌入元素在IE中不起作用，可能还有webkit（我永远不记得哪个在哪里工作）。 我建议使用闪光嵌入的satay方法。 干嘛

Answer 2

如前所述，您正在尝试设置所有参数而不是名称为“电影”的参数。

话虽这么说，我不相信你可以像在线那样改变video。 我建议制作另一个页面，比如说display_video.php或其他什么。 写一些php来生成youtube嵌入代码。 如：

然后，使用jquery的$ .ajax（）方法来更新它。 像这样的东西：

 $(document).ready(function() { $('.scrollableArea a').click(function() { var video_id = this.id // same thing as $(this).attr('id') $.ajax({ type: "POST", url: "display_video.php", data: "video_id=" + video_id, success: function(html){ $('#gallery_content').html(html); } }); }); }); 

您可能需要对此进行一些修改，因为我对您正在做的事情并不十分了解。 希望这可以帮助！

编辑

此外，如果.scrollableArea中包含大量标记，则可能需要考虑事件委派。 它会加速你的JavaScript。 它看起来像这样：

 $(document).ready(function() { $('.scrollableArea').click(function(e) { // get tagname of the element that was clicked var element_clicked = e.target.tagName; if (element_clicked = 'a') { // now change the video var video_id = this.id // same thing as $(this).attr('id') $.ajax({ type: "POST", url: "display_video.php", data: "video_id=" + video_id, success: function(html){ $('#gallery_content').html(html); } }); } }); }); 

事件委派是一种有效的方式来监视大量元素的事件。 通过绑定到DOM树的更远点并观察冒泡事件来工作。 基本上，您将click事件绑定到DOM中的ONE元素而不是许多元素。

Answer 3

感谢大家，我已经通过一些组合逻辑解决了我的解决方案，这些逻辑源于这些建议。

 $('.scrollableArea a').click(function() { var newObjElement = ''; mainArea.html(newObjElement); }); 

*注意this.id

这适用于大多数浏览器，（safari，opera，chrome，firefox，ie8 / 9），ie6和7.除外（尽管不关心ie6）

关于为什么/如何解决ie7问题的任何想法？

干杯!