Question

https://jsfiddle.net/jzhang172/uhmubhtf/3/

我想只在浏览器宽度是一定长度的情况下应用jQuery，但也检测到它尚未包含在内。

现在，它适用它，因为它不断检查浏览器宽度并应用fadeIn和fadeOut。

＆＃13;

$(function(){
  function screenClass() {
  
 if ($( window ).width() <500){
$(".ok span").fadeOut(function(){
$(this).html("no").fadeIn();
});
}
else{

$(".ok span").fadeOut(function(){
$(this).html("yes").fadeIn();
});
}

  }
  $(window).bind('resize',function(){
  screenClass();
  });
  
  
  });

＆＃13;

.ok{
  background:blue;
  height:300px;
  width:300px;
  transition:1s;
  font-size:30px;
  color:white;
}
.span{
  color:white;
  font-size:30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"><span></span></div>

＆＃13;

Answer 1

我认为这就是你想要的？你只需要添加条件......

$(function() {
  if ($(window).width() > 500) {
    $('.ok span').html("yes");
  } else {
    $('.ok span').html("no");
  }

  function screenClass() {
    if ($(window).width() < 500 && $('.ok span').html() == 'yes') {
      $(".ok span").fadeOut(function() {
        $('.ok span').html("no").fadeIn();
      });
    } else if ($(window).width() > 500 && $('.ok span').html() == 'no') {
      $(".ok span").fadeOut(function() {
        $(".ok span").html("yes").fadeIn();
      });
    }

  }
  $(window).bind('resize', function() {
    screenClass();
  });


});

https://jsfiddle.net/chqzeshj/

jQuery：只有在特定浏览器宽度的情况下才会转换

1 个答案: