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

我有一些jQuery代码，我想根据屏幕宽度进行触发。我希望这在触发页面加载和调整浏览器窗口。目前它只在页面加载时加载。触发jQuery'if语句'调整大小

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

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

我已经搜索了解并理解我需要使用jQuery调整大小事件，但我无法使其工作。

任何帮助将不胜感激。这是一个codepen ... http://codepen.io/anon/pen/WbxKrv

来源

2014-12-19 Adam

看那'matchMedia'。 – SLaks

↑↑↑https://developer.mozilla.org/en-US/docs/Web/API/window.matchMedia –

当然，但这仍然不会触发调整大小，除非我误会？这里是我的例子http://codepen.io/anon/pen/RNRBGv – Adam

这是我试图实现 - 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);

来源

2014-12-23 10:05:23 Adam

从您的评论下面，你没有切换与用户点击毕竟。（不知道是什么在你的代码示例中的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; 
    } 
}

原来的答复：

我需要你的目标是要笑在手机或桌面网站上自动或当用户点击按钮时。

从根本上说，你把逻辑功能和重用他们：

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

来源

2014-12-19 16:53:41

不，我只想在桌面和手机上显示桌面。它可以正常工作，因为它具有原始代码，我只是想要它，所以当您调整窗口大小时，会自动激活移动按钮，而不是在移动视图中刷新页面。 – Adam

@Adam：然后从上面删除'click'处理程序。（如果不允许用户执行此操作，它们是什么？）基本点是，您将决策的逻辑放入一个函数中，在负载中调用该函数，然后在调整大小时再次调用它。 –

不需要点击处理程序来演示使用javascript的简单测试用例。好的，让我试着重新措辞。假设我在桌面视图上（宽度大于720px）。我点击桌面上的按钮，显示桌面文字。这是完美的，如果我尝试点击移动按钮，什么都不会发生，这很好。现在，当我将窗口大小调整到720像素宽以下时，我希望能够点击移动按钮，并将此显示为移动文字，而无需刷新我的窗口。这有意义吗？ – Adam

-1

您可以使用this。在这里你需要添加onresize属性的身体标记和调用你的逻辑写入的函数。

<body onresize="myFunction()">

来源

2014-12-19 17:00:53

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

回答

相关问题