0

こんにちは、calc というオブジェクトがあります。そして、この中にはinitを含むいくつかの関数があります。jqueryを使用してdivに追加する3つのボタンがあります。したがって、ユーザーが任意のボタンをクリックすると、入力関数がトリガーされ、これらの条件に基づいて if else ステートメントが実行された後、残りの 3 つの関数のうちの 1 つが呼び出さcalculateれresetますemailtofriend。問題は、入力関数以外の他の関数を呼び出さないことです。なぜこのように動作し、どのように機能させるのですか?

これが私のコードです

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 に答える