與attr（）方法的JQuery對象/嵌入元素問題

我想交換此嵌入元素的src值，取決於點擊事件的值。
它在firefox和opera中可以正常工作，但不能在safari，chrome或IE中使用。與attr（）方法的JQuery對象/嵌入元素問題

$('.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 click事件函數如下..

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

控制檯的回報，每次點擊的事件 - SRC的值，交替價值錨ID，例如。
http://www.youtube.com/v/videoidhere?version=3&autoplay=1

這是一個瀏覽器的問題？
操作對象/嵌入元素有問題嗎？
我做錯了什麼？（可能！）

來源

2011-03-02 Michel Joanisse

webkit和ie中究竟發生了什麼？該錨的ID是否未保存在嵌入和參數元素中？或者視頻是不是正在播放？ – Johnny 2011-03-02 20:38:14

'object'元素中只有1個param元素嗎？如果不是，則覆蓋全部**的param標籤。 – zzzzBov 2011-03-02 20:51:51

@Johnny Freeman來自控制檯，每次點擊事件都會被保存/交換;然而，這種情況下的視頻不會改變。默認加載的初始視頻會繼續播放。 – 2011-03-02 20:51:54

這可能是因爲你覆蓋了一個param元素，你不打算：

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

可能做的伎倆爲您服務。嵌入元素在IE中不起作用，可能還有webkit（我永遠不會記得哪個在哪裏工作）。我建議使用閃存嵌入的方法satay。它是DRY呃

來源

2011-03-02 20:55:43 zzzzBov

如前所述，你是試圖設置所有的參數，而不是名稱=「電影」。

這就是說，我不相信你可以改變這種「動態」的視頻。我會建議製作另一個頁面，讓我們說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內大量一個標籤。它會加快你的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中的一個元素，而不是很多。

來源

2011-03-02 21:21:17 Johnny

感謝大家，我已經解決了我的一些組合邏輯，從這些建議派生出來的解決方案。

$('.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瀏覽器，歌劇，瀏覽器，Firefox，IE8/9）與IE6的例外，7（雖然不關心IE6）

任何想法，爲什麼/如何解決ie7的問題？

乾杯！

來源

2011-03-09 18:21:20

有人嗎？謝謝！ – 2011-03-14 17:02:11

與attr（）方法的JQuery對象/嵌入元素問題

回答

相關問題