我的 jQuery 代码不起作用

Question

所以我正在尝试制作一个无序列表，您将鼠标悬停在其中一个上，它会更改为视频， 这是我的 jQuery 代码： 顺便说一句，我的 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);