如何使用jquery根據屏幕大小生成動態CSS

Question

我正在嘗試使用 jquery 設置響應式background-position 。 如果設備是移動設備（屏幕大小），那么它必須加載ggowlData.backgroundposition_sm但代碼無法檢測到屏幕。 當我在 chrome 中更改窗口大小時，該值會保持在較大的設備位置。

HTML

---

<section class="ggowl-background-wrapper" 
          data-ggowl="{&quot;backgroundimage&quot;:&quot;http:\/\/dev.geekygreenowl.online\/wp-content\/uploads\/2019\/08\/aperture-science-wallpaper.jpg&quot;,&quot;backgroundimagehover&quot;:&quot;http:\/\/dev.geekygreenowl.online\/wp-content\/uploads\/2019\/08\/aperture-science-wallpaper.jpg&quot;,&quot;backgroundposition&quot;:&quot;bottom right&quot;}" 
          data-id="5df0d84" data-element_type="section" 
          data-settings="{&quot;background_background&quot;:&quot;classic&quot;}" 
          style="background-image: url(&quot;http://dev.geekygreenowl.online/wp-content/uploads/2019/08/aperture-science-wallpaper.jpg&quot;); background-position: right bottom;">
    <div class="elementor-container elementor-column-gap-default">
        <div class="elementor-row">
            <div class="elementor-element elementor-element-4aede67 elementor-column elementor-col-100 elementor-top-column" data-id="4aede67" data-element_type="column">
                <div class="elementor-column-wrap">
                    <div class="elementor-widget-wrap">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

---

腳本

jQuery(document).ready(function($) {

  var ggowlIsBreakPoint = function (bp) {
      sm = parseInt(ggowlDataLoder.sm); //460 - loaded from database
      md = parseInt(ggowlDataLoder.md); //720 - loaded from database
      lg = parseInt(ggowlDataLoder.lg); //1120 - loaded from database
      var bps = [sm, md, lg],
          w = $(window).width(),
          min, max
      for (var i = 0, l = bps.length; i < l; i++) {
        if (bps[i] === bp) {
          min = bps[i-1] || 0
          max = bps[i]
          break
        }
      }
      return w > min && w <= max
  }

  $('.ggowl-background-wrapper').each(function(){
        var ggowlData = jQuery.parseJSON( $(this).attr('data-ggowl'));
        $(this).css('background-image', 'url(' + ggowlData.backgroundimage + ')'); // working fine - Tested

        if(ggowlIsBreakPoint(ggowlDataLoder.sm)){
            alert("Small");
            $(this).css('background-position', ggowlData.backgroundposition_sm);
        }else if(ggowlIsBreakPoint(ggowlDataLoder.md)){
              alert("medium");
            $(this).css('background-position', ggowlData.backgroundposition_md);
        }else {
              alert("Large");
           $(this).css('background-position', ggowlData.backgroundposition_lg); //this is only getting loaded
        }
    });
});

Answer 1

將檢查窗口寬度的部分包裝在函數內，並為窗口設置調整大小偵聽器。

例如： jsFiddle

function adjustSize() {
  $('.ggowl-background-wrapper').each(function(){
      var ggowlData = jQuery.parseJSON( $(this).attr('data-ggowl'));
      $(this).css('background-image', 'url(' + ggowlData.backgroundimage + ')'); // working fine - Tested

      if(ggowlIsBreakPoint(ggowlDataLoder.sm)){
          console.log("Small");
          $(this).css('background-position', ggowlData.backgroundposition_sm);
      }else if(ggowlIsBreakPoint(ggowlDataLoder.md)){
            console.log("medium");
          $(this).css('background-position', ggowlData.backgroundposition_md);
      }else {
            console.log("Large");
         $(this).css('background-position', ggowlData.backgroundposition_lg); //this is only getting loaded
      }
  });
}

//add the event listener to get the window width 
//everytime the window is being resized
$(window).on('resize', adjustSize);
//Execute once inside the load listener 
adjustSize();