javascript - jQuery:仅在特定浏览器宽度下才转换

Question

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

我想仅在浏览器宽度为特定长度时应用 jQuery，但同时检测到它不在其中。

现在，它无论如何都会应用它，因为它会不断检查浏览器宽度并应用淡入和淡出。

$(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();
  });
  
  
  });
  

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

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

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/