單擊 jquery 時將背景圖像設置為名稱屬性不起作用

Question

我將每個頁面的英雄背景圖像設置為單擊的按鈕的名稱，包括字符串中的 URL 和擴展名。 在警告窗口中，顯示正確的背景圖像但未設置背景圖像。 怎么了？ 我以同樣的方式設置目標，也許這就是發生沖突的地方，所以我也包含了這段代碼。

var pageTrigger = $(".tab-button-pages");
var mainSections = $(".section");
var tabletBackground = $(".tablet-content-background");

pageTrigger.on('click', function(){
  var $this = $(this),
  target = $this.data('target');

  name = $this.attr('name');
  $(".tablet-content-background").css('background-image','url(./img/'+name+'.png)');

  pageContainer.load(target);

  return false;
});

<div class="tab-button-pages" name="meridian" data-target="meridian.html">
    See More
</div>

Answer 1

 var pageTrigger = $(".tab-button-pages"); var mainSections = $(".section"); var tabletBackground = $(".tablet-content-background"); var pageContainer = $(".tablet-content-background"); pageTrigger.on('click', function(){ var $this = $(this), target = $this.data('target'); name = $this.attr('name'); pageContainer.attr('style','background-image:url('+name+'); min-height: 300px;'); pageContainer.html(target); return false; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tab-button-pages" name="https://via.placeholder.com/150" data-target="Background 1"> See More </div> <br><br> <div class="tab-button-pages" name="https://via.placeholder.com/320" data-target="Background 2"> See More </div> <br><br> <div class="tablet-content-background"></div>