Question

我遇到的情况是我将Youtube视频加载到容器中。基本上，当用户忽略他们在YouTube网址中打入的输入时，它会被嵌入到嵌入指定容器的iframe中。

这部分代码似乎运行正常。问题在于用户何时从输入中删除其URL。当发生这种情况时，我需要容器恢复到原始状态。

下面我认为可行的代码并不适用。 .empty()或.remove()似乎都不会移除iframe并将原始内容放回原位。

如果有人能够解决我的问题，那将非常感激。

<!-- input html -->
<div class="text-group">
    <input class="text-input js-thumb" type="text" placeholder="URL"  required>
</div>

<!-- container html -->
<div class="content-img-wrapper">
    <div class="content-img-placeholder"></div>
</div>


// jQuery
$(document).ready(function() {
    var thumbFetch = $('.js-thumb');
    thumbFetch.blur(function() {
        if(thumbFetch.length >= 1) {
            $('.content-img-wrapper').html('<iframe width="100%" height="100%" src="http://www.youtube.com/embed/' + thumbFetch.val() + '?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
        } else {
            $('.content-img-wrapper').empty();
            $('.content-img-wrapper').html('<div class="content-img-placeholder"></div>');
        }
    });
});

Answer 1

thumbFetch.length告诉你有多少dom元素与jQuery选择器匹配。相反，请尝试thumbFetch.val().length作为输入值的长度。

你可能想要的是：

var thumbFetch = $('.js-thumb');
thumbFetch.change(function() {
    if(thumbFetch.val() !== '') {
        $('.content-img-wrapper').html('<iframe width="100%" height="100%" src="http://www.youtube.com/embed/' + thumbFetch.val() + '?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
    } else {
        $('.content-img-wrapper').html('<div class="content-img-placeholder"></div>');
    }
});

正在删除从我的网页嵌入的YouTube

1 个答案: