1

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

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

这是JSFiddle

以及重要的代码部分：

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”元素，并且每个元素都需要通过单击具有相同的相应最小/最大功能最小最大值图标。

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

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

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

我有一种奇怪的感觉，这与闭包有关，但是是的……对 JS 或 JQuery 的了解还不够，无法真正弄清楚这一点。

4

2 回答 2

1

在 jQuery 事件处理程序this中是指触发事件的对象。因此，在您的点击回调中，this不再引用您的 Artist 实例。为了解决这个问题，您可以创建一个变量that并将其设置为 Artist 实例。感谢javascript 闭包，您可以引用that并仍然可以访问该实例。

工作演示

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
    });
};
于 2013-08-13T00:00:31.173 回答
0

问题已得到解答，但我想补充一点，您可以在此处进行更改，addClass()并且您的代码将更易于维护。removeClass()toggleClass()

于 2017-10-03T07:27:08.447 回答