Question

如果屏幕宽度id小于700px，我想清空内部的任何内容。

<body>
<div class="outter">
  <div class="middle">
    <div class="inner">
       {{ content.something_1 }}
    </div>
  </div>
</div>

$(document).ready(function() {
  if (($(window).width() < 701)) {
    $(".inner").empty();
   }
  else {
    $(".inner").append( "{{ content.something_1 }}" );
  }
});

它不起作用。

Answer 1

$（window）.width（）＆lt;应该给出700。

Answer 2

您也可以尝试纯CSS。

@media only screen and (max-width: 700px) {
   .inner{
       dislay:none;
    }
}

Answer 3

你可以试试这个

$（窗口）.width（）应该为您提供屏幕宽度

$(document).ready(function() {
  if ($(window).width() < 701) {
    $(".inner").empty();
   } else {
    $(".inner").append( "{{ content.something_1 }}" );
  }
});

Answer 4

如果我错了，请纠正我，你说那个

如果屏幕宽度id较小，我想清空内部内的任何内容比700px 。

试试这个

$(document).ready(function() {
  if (($(window).width() < 701)) {
    $(".inner").empty();
   }
  else {
    $(".inner").append( "{{ content.something_1 }}" );
  }
});

如果您需要在屏幕上引用，请使用$(window)，在您的方案中使用$（this）只是引用文档

但如果屏幕调整大小怎么办？

您可以使用活动resize

$(window).resize(function(){
 //do something when the screen is resized
});

Answer 5

在调整大小函数中编写代码以在视口大小调整时触发它。

 <div class="outer">
    <div class="middle">
      <div class="inner">
         {{ content.something_1 }}
      </div>
    </div>
 </div>



  $(document).ready(function() {
    var sWidth;
     $(window).resize(function(){
       sWidth = $(window).width();
       if (sWidth < 700) {
         $(".inner").empty();
       }
       else {
         $(".inner").append( "{{ content.something_1 }}" );
       }
     }).resize();      
  });

jQuery替换/清空div内容

5 个答案: