Question

我创建了一个工具，允许用户抓取YouTube视频的缩略图，尽管我遇到了一些循环问题。在输入视频的监视ID时，如果您在输入中重新输入另一个ID，则会显示图像，但不会更改。我怎么能改变代码以允许循环/多个图像抓取？

<!doctype html>
<html>
<head>
    <title>Thumbnail Grabber</title>
    <script type="text/javascript">
    window.onload = function()
    {
        document.getElementById( 'inp' ).onkeyup = keyUp;
    }

    function keyUp()
    {
        var img = document.getElementById( 'image' );
        img.src = img.src.replace( /url=[^&]+/, this.value +'/maxresdefault.jpg' );
    }
    </script>
    </head>
    <body>
        <input type="text" id="inp">

        <img id="image" src="http://img.youtube.com/vi/url=example/">
    </body>

Answer 1

您的替换正在移除 url=部分。假设this.value为"X"，则会将src属性更改为http://img.youtube.com/vi/X/maxresdefault.jpg。在下一个keyup事件中，将无需再替换任何内容。

此外，不要忘记用户输入&字符时的情况。

所以我建议.replace( /url=[^&]+/, "url=" + encodeURIComponent(this.value+'/maxresdefault.jpg') );

循环交替图像源功能

1 个答案: