Question

我想根据屏幕宽度触发一些jQuery代码。我希望这能在页面加载时触发并调整浏览器窗口的大小。目前它只在页面加载时加载。

$(function(){
  if ($(window).width() < 720) {
    $(".mobile").click(function(){
      $("#mobile").toggle();  
    });
  } else {
    $(".desktop").click(function(){
      $("#desktop").toggle();  
    });
  }
});

E.g。如果用户以桌面大小加载并调整大小，则除非用户刷新页面，否则不会触发移动点击。

我已经google了解并且明白我需要使用jQuery resize事件，但我无法让它工作。

非常感谢任何帮助。这是一个codepen ... http://codepen.io/anon/pen/WbxKrv

Answer 1

从下面的评论中，您毕竟不是通过用户点击来切换它。（不确定代码示例中的click处理程序是什么意思。）

处理此问题的最佳方法是使用CSS，而不是JavaScript，使用媒体选择器：

@media screen and (max-width: 720px) {
    selector-for-your-big-screen-only-content {
        display: none;
    }
}
@media screen and (min-width: 721px) {
    selector-for-your-small-screen-only-content {
        display: none;
    }
}

更多：http://www.w3.org/TR/css3-mediaqueries/

原始回答：

我认为您的目标是自动或在用户点击按钮时显示移动或桌面网站。

从根本上说，您将逻辑放在函数中并重用它们：

$(function(){

  // Auto select on load and resize
  autoSelect();
  $(window).on("resize.autoselect", autoSelect);

  // If user makes an explicit choice, switch to their choice and don't
  // auto-select anymore
  $(".mobile").click(function() {
    showMobile(true);
    $(window).off("resize.autoselect");
  });
  $(".desktop").click(function() {
    showMobile(false);
    $(window).off("resize.autoselect");
  });

  function autoSelect() {
    if ($(window).width() < 720) {
      showMobile(true);
    } else {
      showMobile(false);
    }
  }

  function showMobile(flag) {
    $("#mobile").toggle(flag);
    $("#desktop").toggle(!flag);
  }
});

Answer 2

这就是我想要实现的目标 - http://codepen.io/anon/pen/azmvWE

现在在页面加载时触发jQuery函数以及调整大小......

function checksize() {
  if ($(window).width() < 720) {
    $(".mobile").click(function(){
      $("#mobile").toggle();  
    });
  } else {
    $(".desktop").click(function(){
      $("#desktop").toggle();  
    });
  }
}

checksize();

$(window).resize(checksize);

Answer 3

您可以使用this。在这里，您需要在body标签上添加onresize属性，并在编写逻辑的地方调用函数。

<body onresize="myFunction()">

在调整大小时触发jQuery'if语句'

3 个答案: