Question

我目前正在尝试获得一个不错的div结构，以通过div向我的网站添加视频内容。我将其设置为vidurl是视频URL，而srcpost是div的背景图像以及选择该视频时加载的海报图像。

我的问题基本上是为什么不进行这项工作？我在网上检查了一个类似的用例，我想我只是无法弄清楚如何正确地提出问题，或者有些事情只是我做的不正确。当我的attr srcpost中包含url（“”）时，我就可以使用它，但是如果可能的话，我想从html中删除它。

jQuery( document ).ready(function() {
   loadbgimg();
});

function loadbgimg() {
   $( '.video_selection' ).each(function() {
      var backgroundimg = $( this ).attr( 'srcpost' ).replace('%', ' ');
      $( this ).css('background-image', 'url(' + backgroundimg + ')');
   });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='video_selection' vidurl='http://localhost/movies/Napoleon%Dynamite/napdyn.mp4' 
srcpost='http://localhost/movies/Napoleon%Dynamite/poster.jpg'>
<p>Napoleon Dynamite</p>
</div>

Answer 1

您的脚本有效！请查看下面的代码片段，并添加一些CSS和有效图像。

我的猜测是您的图像路径不正确。尝试在浏览器中转到section，然后查看图像是否确实存在。

如果图像路径正确，请检查http://localhost/movies/Napoleon%Dynamite/poster.jpg中的控制台。也许那会给你一些答案。无论哪种方式，问题都不在于您的脚本。希望这会有所帮助！

jQuery( document ).ready(function() {
   loadbgimg();
});

function loadbgimg() {
   $( '.video_selection' ).each(function() {
      var backgroundimg = $( this ).attr( 'srcpost' ).replace('%', ' ');
      $( this ).css('background-image', 'url(' + backgroundimg + ')');
   });
}

.video_selection {
   padding: 10px;
   color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='video_selection' vidurl='http://localhost/movies/Napoleon%Dynamite/napdyn.mp4' srcpost='http://placekitten.com/600/300'>
<p>Napoleon Dynamite</p>
</div>

<div class='video_selection' vidurl='http://localhost/movies/Napoleon%Dynamite/napdyn.mp4' srcpost='http://placekitten.com/800/300'>
<p>Another video</p>
</div>

加载时基于html属性设置背景图片

1 个答案: