javascript - 在加载时根据 html 属性设置背景图像

Question

我目前正在尝试获得一个很好的 div 结构，以便通过 div 将视频内容添加到我的网站。我这样设置它，其中 vidurl 是视频 url，srcpost 是 div 的背景图像以及选择该视频时加载的海报图像。

我的问题基本上是为什么这行不通？我在网上查了一个类似的用例，我想我只是想不出如何正确地提问，或者我只是做错了什么。当我在其中包含 url("") 的 attr srcpost 时，我让它工作，但如果可能的话，我想从 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 和工作图像。

我的猜测是您的图像路径不正确。试着去 http://localhost/movies/Napoleon%Dynamite/poster.jpg在您的浏览器中查看您的图像是否确实存在。

如果你的图片路径是正确的，检查Chrome dev tools中的控制台.也许这会给你一些答案。无论哪种方式，问题都不是您的脚本。希望这对您有所帮助!

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>