Question

问题：在用户双击红色方块之前，元素不是“最大化”。

基本上，变量'clicked'正在onClick上实例化，而不是事先实例化。产生的行为是用户必须单击一次才能实例化“clicked”变量，然后该功能将按需运行。

代码的重要部分：

var container = $(this).parents('.container');
var paragraph = $(container).find('.text');
if (this.clicked == 0) {
    container.removeClass("large-4");
    container.addClass("large-8");
    paragraph.removeClass("hide");
    this.clicked = 1;
}

感谢任何帮助！

详情（不必阅读：D）：

我正在进行这种反向选择（选择子元素然后选择父元素）的原因是因为将存在许多这些“.container”元素，并且每个元素需要具有相同的相应最小/最大功能。点击minmax图标。

显然，该方法不引用单个本地“clicked”类变量。这甚至没有意义，因为每个元素都需要自己的“点击”变量。

如果有更好的方法可以做到这一点，我会对任何事情持开放态度，但即便如此，将这个具体问题弄清楚会更好，因为这有助于我对Jquery的全面理解。

对于熟悉类名的人，我在这个项目中使用了Foundation的框架。

我有一种奇怪的感觉，这与封闭有关，但是......对JS或JQuery的了解不足以真正解决这个问题。

Answer 1

在jQuery事件处理程序this中引用触发事件的对象。因此，在您的点击回调中，this不再引用您的艺术家实例。要解决此问题，您可以创建变量that并将其设置为Artist实例。感谢javascript closures，您可以参考that并仍然可以访问该实例。

<强> Working Demo

Artist.clickHandler = function () {
    var that = this;
    //this.clicked is undefined until the event is actually fired
    that.clicked = 0;
    $('.minmax').click(function () {
        if (typeof that.clicked === 'undefined') {
            console.log("that.clicked is undefined");
        } else {
            console.log("that.clicked is defined");
        }
        //rest of handler here
    });
};

Answer 2

问题已得到解答，但我想在此处添加，您可以将addClass()和removeClass()更改为toggleClass()，您的代码将更易于维护。

在单击事件之前，Jquery变量未实例化

2 个答案: