我的jQuery代碼不起作用

Question

所以我試圖做一個無序的列表，其中你將鼠標懸停在其中一個視頻上，它改變爲視頻， 這是我的jQuery代碼： btw，我的jQuery代碼有效，但只是IFRAME SRC變化不

$(document).ready(function(){ 
$('#qnaul li a').mouseenter(function() { 
    $(this).css("background-color" , "black"); 
    $(this).css("color" , "#c97c00"); 
    $('#ytplayer').attr('src', $(this).find('a').attr('href')); 

}).mouseleave(function() { 
    $(this).css("background-color" , "#c97c00") 
    $(this).css("color" , "black"); 

    }); 
}); 

我的html：

<ul id="qnaul"> 
      <li style="width: 20%;margin-left: 0px;height: 100px;" class="liclass"><a href="http://www.youtube.com/embed/vlZ7Log_uoE">1</a></li> 
      <li style="width: 20%;margin-left: 30px;" class="liclass"><a href="http://www.youtube.com/embed/AFdJzSGab-8">2</a></li> 
      <li style="width: 20%;margin-left: 30px;" class="liclass"><a href="">3</a></li> 
      <li style="width: 20%;margin-left: 90px;" class="liclass"><a href="">4</a></li> 
      <li style="width: 20%;margin-left: 30px;border: 0;" class="liclass"><a href="">5</a></li> 
     </ul> 

我的iframe：

<iframe id="ytplayer" type="text/html" width="640" height="390" allowfullscreen="yes" src="" frameborder="0" style="margin-left: 400px;margin-bottom: 10px;background-color: black;"></iframe> 

Answer 1

你的jQuery上下文已經是<a>元素，所以爲了提取href你只需要this.href。

替換：

$('#ytplayer').attr('src', $(this).find('a').attr('href')); 

有了：

$('#ytplayer').attr('src', this.href);