在调整大小时触发jQuery“if语句”_Jquery

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

jquery

在调整大小时触发jQuery“if语句”,jquery,Jquery,我有一些jQuery代码，我想根据屏幕宽度激发它们。我希望在页面加载和调整浏览器窗口大小时触发此操作。目前它只在页面加载时加载 $(function(){ if ($(window).width() < 720) { $(".mobile").click(function(){ $("#mobile").toggle(); }); } else { $(".desktop").click(function(){ $("#deskt

我有一些jQuery代码，我想根据屏幕宽度激发它们。我希望在页面加载和调整浏览器窗口大小时触发此操作。目前它只在页面加载时加载

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

例如，如果用户以桌面大小加载并缩小大小，则除非用户刷新页面，否则不会触发移动单击

我在谷歌上搜索过，知道我需要使用jQuery resize事件，但我无法让它工作

任何帮助都将不胜感激。这是一个代码笔…

从你下面的评论来看，你毕竟不能通过用户点击来切换它。那么，不确定代码示例中的单击处理程序是什么

处理此问题的最佳方法是使用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;
    }
}

原始答复：

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

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

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

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

<body onresize="myFunction()">

这就是我想要达到的-

jQuery函数现在在页面加载和调整大小时被触发

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

checksize();

$(window).resize(checksize);

看看媒体。↑↑↑ 当然，但这仍然不会触发调整大小，除非我弄错了？这是我的例子不，我只想在桌面上显示桌面，在手机上显示手机。正如我在原始代码中所做的那样，它可以正常工作，我只是希望在向下调整窗口大小时，自动激活“移动”按钮，而不是在“移动”视图中刷新页面。@Adam:然后从上面删除“单击”处理程序。如果不允许用户这样做，他们是为了什么？最基本的一点是，您将做出决策的逻辑放在函数中，在加载时调用该函数，然后在调整大小时再次调用它。好的，让我试着重新措辞。假设我的桌面视图宽度大于720px。我点击桌面按钮，显示桌面文本。这是完美的，如果我试着点击移动按钮，什么都不会发生，这很好。现在，当我将窗口的大小调整到720px以下时，我希望能够单击移动按钮，使其显示移动文本，而无需刷新窗口。这有意义吗？