Question

我正在设置一些简单的布尔值来测试移动布局和触摸设备，但是我在使代码更紧凑方面遇到了一些困难。

isTouch测试触控设备。

mobile测试屏幕宽度何时低于769px。

我最后的if/else声明是测试我是否使用移动触摸设备（iPad，手机等）。我可以提醒输出，一切都是预期的，但static_element仍然显示而不是swiper_element。我知道我的布尔人错过了一些东西。

帮助新手出去？

$(document).ready(function () {
    var windowWidth,
        isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)),
        mobile,
        touchDevice;

    $(window).on('load resize', function () {
        windowWidth = $(window).width();

        if (windowWidth < 769) {
            mobile = true;
        } else {
            mobile = false;
        }

        if (isTouch = true) {
            touchDevice = true;
        } else {
            touchDevice = false;
        }
    });

    if (touchDevice && mobile) {
        $('.static_element').hide();
        $('.swiper_element').show();
    } else {
        $('.static_element').show();
        $('.swiper-element').hide();
    }
});

Answer 1

swiper的功能不起作用，因为代码的最后一行有一个破折号而不是下划线。是的，你可以简化一些事情（见下面的代码）。我将所有移动检测逻辑都移到了一个函数中，因此我们可以随时重用它。

注意：移动检测是一门艺术 - 主要是因为有很多设备和用例。查询“ontouchstart”功能适用于大多数设备，但在某些设备上无法正常工作。这就是我添加console.log的原因，因此您可以检查是否执行了正确的代码块。

$(document).ready(function () {
    var isTouch,
        isMobile;

    // Initially call the function to set isTouch and isMobie 
    detectMobile();

    // If the window is reloaded or resized check again
    $(window).on('load resize', detectMobile);


    // Set the booleans when called
    function detectMobile() {
        // Always evalutes to true or false
        isTouch = ('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0);
        // Always evalutes to true or false
        isMobile = $(window).width() < 769;
    }

    if (isTouch && isMobile) {
        // Logs the actual status to the console
        console.log("I'm a mobile device!");
        $('.static_element').hide();
        $('.swiper_element').show();
    } else {
        // Logs the actual status to the console 
        console.log("I'm a boring normal device!");
        $('.static_element').show();
        $('.swiper_element').hide();
    }
});

Answer 2

将您的代码更改为：

$(document).ready(function () {
var windowWidth,
    isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)),
    mobile,
    touchDevice;

$(window).on('load resize', function () {
    windowWidth = $(window).width();

    if (windowWidth < 769) {
        mobile = true;
    } else {
        mobile = false;
    }

    if (isTouch) {
        touchDevice = true;
    } else {
        touchDevice = false;
    }
});

if (touchDevice && mobile) {
    $('.static_element').hide();
    $('.swiper_element').show();
} else {
    $('.static_element').show();
    $('.swiper-element').hide();
}
});

意外的if / else结果使用布尔值

2 个答案: