javascript - jquery 根据浏览器宽度改变

Question

如果浏览器宽度 > 760 像素且小于 980 像素，我希望 Div 标签为空，但看起来我做错了什么

    (function($){

  //detect the width on page load
  $(document).ready(function(){

    var current_width = $(window).width();
     //do something with the width value here!
    if(current_width < 980 && current_width > 760){
       $('#chwd').empty();
    }
  });

  //update the width value when the browser is resized (useful for devices which switch from portrait to landscape)
  $(window).resize(function(){
    var current_width = $(window).width();
   //do something with the width value here!

    if(current_width < 980 && current_width > 760  ){
         $('#chwd').empty();
    }
    else{
        $('#chwd').html(

<div id="ahead">
<div class="column">
Cash On Delivery
</div>
</div>

        );}
  });

})(jQuery);

任何帮助将不胜感激

谢谢

Answer 1

你的脚本没问题，问题在于你如何构建$('#chwd').html()

Javascript 以不同方式处理新行。与 PHP 或其他语言不同，只要它用引号/单引号引起来，您就可以继续放置新行。在 Javascript 中，每次换行时，都必须用 '' 和 + 将其包裹起来(参见我的代码)

这是可以接受的

'Lorem' +
'Ipsum'

这是 Not Acceptable

'Lorem
 Ipsum'

试试这个:

 (function($){

  //detect the width on page load
  $(document).ready(function(){

    var current_width = $(window).width();
     //do something with the width value here!
    if(current_width < 980 && current_width > 760){
       $('#chwd').empty();
    }
  });

  //update the width value when the browser is resized (useful for devices which switch from portrait to landscape)
  $(window).resize(function(){
    var current_width = $(window).width();
   //do something with the width value here!

    if(current_width < 980 && current_width > 760  ){
         $('#chwd').empty();
    }
    else{
        $('#chwd').html('<div id="ahead">'+
'<div class="column">'+
'Cash On Delivery'+
'</div>'+
'</div>');
    }
  });

})(jQuery);