使用 attr() 方法的 JQuery 对象/嵌入元素问题答案

【问题标题】：JQuery object / embed element issue with attr() method使用 attr() 方法的 JQuery 对象/嵌入元素问题
【发布时间】：2011-04-23 10:55:37
【问题描述】：

我正在尝试交换此嵌入元素的 src 值的值，具体取决于点击事件。
它可以按预期在 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);
});

如果我在console.log下面的点击事件函数..

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

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

——

这是浏览器问题吗？
操作对象/嵌入元素有问题吗？
难道我做错了什么？（可能！）

【问题讨论】：

webkit 和 ie 中到底发生了什么？锚的 id 没有保存在 embed 和 param 元素中吗？还是视频没有播放？
object 元素中是否只有 1 个 param 元素？如果不是，您将覆盖 all 的参数标签。
@Johnny Freeman 来自控制台，每次点击事件都会保存/交换它；但是，这种情况下的视频不会改变。默认加载的初始视频会继续播放。
@zzzzBov 谢谢你的收获，有几个；不幸的是，更具体一点，仍然不能解决问题。
@Michel Joanisse，在这种情况下，为什么不直接通过 $('#gallery_content object').replace('<object...'); 替换整个 object？

标签： javascript jquery jquery-selectors

【解决方案1】：

您可能会覆盖您不打算这样做的param 元素：

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

可能会为您解决问题。嵌入元素在 IE 中不起作用，可能还有 webkit（我不记得哪个在哪里起作用）。我建议使用satay 闪存嵌入方法。我是DRYer

【讨论】：

【解决方案2】：

如前所述，您正在尝试设置所有参数，而不是 name="movie" 的参数。

话虽如此，我不相信您可以“即时”更改视频。我建议制作另一个页面，比如说 display_video.php 或其他东西。编写一些 php 来生成 youtube 嵌入代码。如：

<?php if(isset($_POST['video_id'])) { ?>

    <object style="height: 390px; width: 640px">

        <param name="movie" value="http://www.youtube.com/v/<?=$_POST['video_id']?>?version=3">
        <param name="allowFullScreen" value="true">
        <param name="allowScriptAccess" value="always">

        <embed src="http://www.youtube.com/v/<?=$_POST['video_id']?>?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390">

    </object>

<? } ?>

然后，使用 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 中有大量 a 标签，您可能需要考虑事件委托。它会加速你的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 树更远的点并观察冒泡事件来工作。基本上，您将点击事件绑定到 DOM 中的一个元素，而不是多个。

【讨论】：

【解决方案3】：

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

$('.scrollableArea a').click(function() {   
    var newObjElement = '<object style="width:580px;height:386px;"><param name="movie" value="http://www.youtube.com/v/'+this.id+'?version=3&autoplay=1"><embed src="http://www.youtube.com/v/'+this.id+'?version=3&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="580" height="386"></object>';

    mainArea.html(newObjElement);
});

*注意this.id。

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

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

干杯！

【讨论】：