0

嗨,我有一个叫 calc 的可怜虫。在这里面我有几个函数,包括init。我有三个使用 jquery 附加到 div 的按钮。因此,当用户单击任何按钮时,它将触发输入函数,并且在基于这些条件的一些 if else 语句之后,它将调用其余三个函数之一,即calculate,resetemailtofriend问题是它不调用除输入函数之外的其他函数。为什么它会有这样的行为以及如何让它发挥作用?

这是我的代码

js

var jQuery, container, output,
    calc = {
        init: function () {
            container = $('.calculate');

            $(document).on('click','.userButtons',calc.input);

            calc.widgetDesign(container);
        },
        widgetDesign: function (container) { 
            var widgetContainer = $('<div />').addClass('calculateContainer'),
                form             = $('<div />'),
                buttons         = $('<div />');

            buttons.append('<button rel="reset" class="userButtons">Reset</button><button rel="emailtofriend" class="userButtons">Email to a friend</button>');

            form.append('<div class="label">Weight (kg):</div>');
            form.append('<input type="text" name="weight" class="weight inputs" />');
            form.append('<div class="label">Height (cm):</div>');
            form.append('<input type="text" name="height" class="height inputs" />');
            form.append('<div><button rel="calculate" class="userButtons calcButton">Calculate</button></div>');

            widgetContainer.append(form);

            widgetContainer.append(buttons);

            widgetContainer.appendTo(container);
        },
        input: function () {
            var button = $(this).attr('rel');

            if ( button == 'calculate' ) {
                console.log(button);
                calc.calculate;
            } else if (button == 'reset') {
                console.log(button);
                calc.reset;
            } else if (button == 'emailtofriend') {
                console.log(button);
                calc.emailtofriend;
            }
        },
        calculate: function () {
            console.log('hello');
        },
        reset: function () {
            alert('reset');
        },
        emailtofriend: function () {
            alert('emailtofriend');
        }
    };
    calc.init();​

这是jsfiddle

4

2 回答 2

1

您将需要调用这些函数,而不仅仅是选择它们:-)

        if ( button == 'calculate' ) {
            console.log(button);
            calc.calculate();
        //                ^^
        } else if (button == 'reset') {
            console.log(button);
            calc.reset();
        //            ^^
        } else if (button == 'emailtofriend') {
            console.log(button);
            calc.emailtofriend();
        //                    ^^
        }

顺便说一句:通过使用括号表示法作为成员运算符,这可以写得更短:

if (button in calc) {
     console.log(button);
     calc[button]();
}
于 2012-09-29T10:25:11.467 回答
1

您应该将括号放在函数名称的末尾(),如下所示:

       if ( button == 'calculate' ) {
            console.log(button);
            calc.calculate();
        } else if (button == 'reset') {
            console.log(button);
            calc.reset();
        } else if (button == 'emailtofriend') {
            console.log(button);
            calc.emailtofriend();
        }
于 2012-09-29T10:25:16.757 回答