Question

我对javascript和jQuery相当新，所以非常感谢您的帮助。

我在移动设备上设计了a site，并使用slider显示小屏幕的图像块（<500px）。

头部提供的jQuery function可以正常工作：

<script>
jQuery(function($) {
$('.slider').sss();
});
</script>

但始终有效。

我找到了一个javascript示例，根据窗口宽度将脚本编写到头部：

var script = document.createElement('script');
script.type="text/javascript";

if(window.matchMedia("(max-width:499px)").matches) {
  jQuery(function($) {$(".slider").sss();});
}

document.getElementsByTagName('head')[0].appendChild(script);

但是这不会改变窗口大小。加载函数后，它将保持加载状态，需要手动刷新才能加载或不加载函数。

必须有一种方法可以动态执行此操作，而无需手动刷新页面。

Answer 1

您可以在resize事件上运行代码，如下所示：

select to_timestamp(avg(18000 + 
                        cast(extract(epoch from badge_in_time::time) as integer)
                       )
                   )::time as Avg_Badge_in

Answer 2

编织： http://kodeweave.sourceforge.net/editor/#3769a18794a75c3973ad798812bf0ad2

您可以使用.on事件监听器调用您的函数;使用此功能，您可以添加.load和.resize，并在.width $(this).width() < 500内使用if else statement，您可以更改任何元素的.html你想要移动和桌面。

这是一个简单的例子！

$(window).on("load resize", function() {
  if ($(this).width() < 500) {
    $("[data-action=change]").html("Mobile")
  } else {
    $("[data-action=change]").html("Desktop")
  }
})

body {
  padding: 1em;
  text-align: center;
}

<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 data-action="change">
  Desktop
</h1>

我的建议是，如果您只是为此效果设置页面样式。不要使用JS，而是使用CSS Media Queries。

您可以使用content属性使用CSS更改HTML内容，但是如果您制作的内容类似于On/Off switch，我建议您这样做。

顺便说一句：在JavaScript中有一些名为Conditional (ternary) Operator的东西，现在我不会将它用于这个特定目的，但需要注意的是。 I made a video tutorial on it，过去，但基本上你有<condition> ? <true-value> : <false-value>。在某些情况下，您可能希望在ternary operator上使用if else statement。 Here's an example of using a ternary operator for your problem。（我正在使用Vanilla/Pure JS进行此演示）

希望这有帮助。

Answer 3

创建了一个使用setInterval()的简单屏幕检测......只是为了与众不同。

$_currentScreenWidth = $(window).width();
var screenDetection = setInterval(function() {
    $_newScreenWidth = $(window).width();
    if ($_currentScreenWidth !== $_newScreenWidth) {
        switch (true) {
            case ($_newScreenWidth <= 320): /** do something(); */  break;
            case ($_newScreenWidth > 320 && $_newScreenWidth <= 480): /** do something(); */ break;
            case ($_newScreenWidth > 480 && $_newScreenWidth <= 768): /** do something(); */  break;
            case ($_newScreenWidth > 768 && $_newScreenWidth < 960): /** do something(); */  break;
            case ($_newScreenWidth >= 960): /** do something(); */  break;
            /** add more screen sizes, and/or adjust the aforementioned accordingly */
            default: /** do something(); */  break;
        }
    }
}, 200); // adjust this value to control the interval rate, in milliseconds; the lower the rate, the greater the responsiveness.

但resize()事件是为这种用例构建的：

$_currentScreenWidth = $(window).width();
$(window).resize(function() {
    $_newScreenWidth = $(window).width();
    if ($_currentScreenWidth !== $_newScreenWidth) {
        switch (true) {
            case ($_newScreenWidth <= 320): console.log('<= 320'); break;
            case ($_newScreenWidth > 320 && $_newScreenWidth <= 480): console.log('> 320 <= 480'); break;
            case ($_newScreenWidth > 480 && $_newScreenWidth <= 768): console.log('> 480 <= 768');  break;
            case ($_newScreenWidth > 768 && $_newScreenWidth < 960): console.log('> 768 < 960');  break;
            case ($_newScreenWidth >= 960): console.log('>= 960');  break;
            /** add more screen sizes, and/or adjust the aforementioned accordingly */
            default: /** do something(); */  break;
        }
    }
});

仅在小型设备上调用jQuery函数

3 个答案: