Question

'use strict';
var Controller = function Controller() {};

Controller.init = function() {
  if (!Controller.PROPERTIE.element || !Controller.PROPERTIE.indicator) {
    return 'Expected to find [data-controller] and [data-controller-to]';
  }

  Controller._start();
};

Controller.PROPERTIE = {
  element: $('[data-controller]'),
  indicator: $('[data-controller-to]'),
  state: false
};

Controller._start = function() {
  Controller.PROPERTIE.indicator.bind('click', Controller._toggle);
};

Controller._toggle = function() {
  Controller.PROPERTIE.element
    .animate({
      bottom: (Controller.PROPERTIE.state = !Controller.PROPERTIE.state) ? '-110' : '0'
    });
};

显然对象属性中的元素不存在，但它们确实存在！有人可以告诉我，如果我不能使用这样的JavaScript吗？

也许有一些东西在吊销剧本？

我已经尝试将对象放在init之前，结果是一样的。

我知道我可以扩展原型，但我有理由这样使用。

感谢。

Answer 1

我可以想到三个可能的原因：

在解析DOM之前初始化代码。
您的HTML实际上并不包含与这些选择器匹配的元素。
在初始化此代码后，将动态创建所需的元素。

在此声明中：

Controller.PROPERTIE = {
  element: $('[data-controller]'),
  indicator: $('[data-controller-to]'),
  state: false
};

在解析此代码时，将立即评估两个jQuery表达式。如果这个代码没有放在正文的最末端，那么这些元素可能还不存在。

通常的解决方案是不在静态声明中初始化这些元素，而是在页面加载后通过调用函数来初始化它们。

如果你真的打算将它们作为全局变量，那么你可以这样做：

$(document).ready(function() {
    Controller.PROPERTIE = {
      element: $('[data-controller]'),
      indicator: $('[data-controller-to]'),
      state: false
    };
});

但是，您必须确保在此代码运行之前不要尝试使用它们。

我能想到的唯一其他可能原因是你的DOM不包含与你的两个选择器相匹配的元素。看起来它可能是这两个问题中的一个。既然您还没有向我们展示您想要匹配的HTML的整体页面结构，那么除了告诉您它可能是什么原因之外，我们不可能做任何事情。

Answer 2

我觉得你认为jQuery对象没有被定义，因为：

if (!Controller.PROPERTIE.element || !Controller.PROPERTIE.indicator) {
    return 'Expected to find [data-controller] and [data-controller-to]';
  }

您必须记住，jQuery构造函数$()将始终返回一个对象。如果你真的想测试是否有一个选定的项目，你必须使用jQuery对象的length属性。

if (!Controller.PROPERTIE.element.length || !Controller.PROPERTIE.indicator.length) {
    //element or indicator not there.
    return 'Expected to find [data-controller] and [data-controller-to]';
  }

为什么属性初始化中的jQuery对象为空？

2 个答案: