Question

我正试图让我的jquery仅在屏幕大小移动时运行。现在当然用css很容易做到这一点，但出于某种原因，一旦我尝试用jquery检测屏幕尺寸它就不起作用。谁知道我在哪里错了？

<script src="JAVASCRIPT/jquery-3.1.0.min.js"></script>
<script>
  if ( $(window).width() > 600) {     
  }
  else {
    $(".tbinputArea").focus(function() {
      $("#footer").hide();
    });

    $(".tbinputArea").focusout(function() {
      $("#footer").show();
    });
  }
</script>

Answer 1

你可以尝试这样：

var isMobileView = false; //global variable

$(document).ready(function () {

    function setScreenWidthFlag() {
        var newWindowWidth = $(window).width();
        if ( $(window).width() > 600) {   
            isMobileView = false;
        }
        else {
            isMobileView = true;
        }
    }

    $(".tbinputArea").focus(function() {
        if(isMobileView)
            $("#footer").hide();
    });

    $(".tbinputArea").focusout(function() {
        if(isMobileView)
            $("#footer").show();
    });

    setScreenWidthFlag();

    $(window).on("resize", function (e) {
        setScreenWidthFlag();
    });
});

Answer 2

试试这个：

$(document).ready(function(){

    if ( $(window).width() > 600) {   

                //Your code....
    }


    $(".tbinputArea").on("focusin",function(){

        if($(window).width() <= 600)

            $("#footer").hide();       

    })


    $(".tbinputArea").on("focusout",function(){

        if($(window).width() <= 600)

            $("#footer").show();             
    })

})

仅在小屏幕上运行JQuery

2 个答案: