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);

我的jQuery代码不起作用

1 个答案: