Question

我正在尝试在JS首次运行时缓存变量，我需要检查html元素上的类.supports-no-touch或.no-touch（以确保捕获任一版本，具体取决于使用哪个版本的Modernizr。

当我像这样运行时，

window.MyScript = window.MyScript || {};
MyScript.cacheSelectors = function () {
  MyScript.cache = {
    $slideoutNavDesktop: ($('.supports-no-touch #slideoutNav') || $('.no-touch #slideoutNav'))
    // OR
    // $slideoutNavDesktop: $('.supports-no-touch #slideoutNav') ? $('.supports-no-touch #slideoutNav') : $('.no-touch #slideoutNav')
  }
};
MyScript.cacheSelectors();
console.log( MyScript.cache.$slideoutNavDesktop );

console.log的结果是 ~~undefined~~ 空的jQuery对象，如：

► [prevObject: n.fn.init(1), context: document, selector: ".supports-no-touch #slideoutNav"]

当我在控制台中运行相同的代码时，例如

console.log( $('.supports-no-touch #slideoutNav') || $('.no-touch #slideoutNav') );
console.log( $('.supports-no-touch #slideoutNav') ? $('.supports-no-touch #slideoutNav') : $('.no-touch #slideoutNav') );

我得到了正确的元素。

此外，我知道在页面加载时，html元素确实具有.no-touch类。

我做错了什么？

编辑：由于变量引用中出现拼写错误，我收到undefined。

Answer 1

jQuery总是返回一个非null对象引用，它始终是真的，所以这些都不会起作用。我认为您在控制台中看到的结果是某种混淆的结果（控制台可能有点令人困惑）。

您可以使用条件运算符，但需要检查.length：

var x = $('.supports-no-touch #slideoutNav').length ? $('.supports-no-touch #slideoutNav') : $('.no-touch #slideoutNav');

...但是DOM查询两次。所以相反：

var x = $('.supports-no-touch #slideoutNav');
if (!x.length) {
    x = $('.no-touch #slideoutNav');
}

但是，更简单的答案是使用选择器组并获取第一个（可能只有）结果：

var x = $('.supports-no-touch #slideoutNav, .no-touch #slideoutNav').first();

注意：您的查询表明您在多个元素上拥有相同的ID。那是无效的。 ID值必须是唯一的。因此，如果您要使用上述内容，我建议将#slideoutNav更改为.slideout-nav或类似内容，并将涉及的元素id="slideoutNav"更改为class="slideout-nav"（添加slideout-nav到他们现有的class属性（如果有）。

在对象文字中设置为变量时，Javascript速记三元运算符无法正常工作

1 个答案: