0

Javascript クラスの別のメソッドから 1 つのメソッドを呼び出すのに問題があります。

ここにコードがあります

    function Spinner( max_value , min_value , div_id ){

    var MAX_VALUE = 25;
    var MIN_VALUE = -25;
    var DEFAULT_VALUE = 0;


    this.maxValue = max_value;
    this.minValue = min_value;
    this.divId    = div_id;
    this.spinnerControl; //spinner control object that is populated in getSpinner() method.


    this.rotateSpinner = function (spinnerTextBoxId,up) {

        document.getElementById(spinnerTextBoxId).value = up ? parseInt(document
                .getElementById(spinnerTextBoxId).value) + 1 : parseInt(document
                .getElementById(spinnerTextBoxId).value) - 1;
    };


    this.getSpinner = function( ){

        spinnerControl = $('<input type="text"></input>')
                .attr('id' , 'spinner')
                .attr('val' , DEFAULT_VALUE)
                    .add( $('<ul></ul>')
                        .addClass("spinner")
                        .append(
                            $('<li></li>')
                            .append($('<input type="button"></input>') 
                                .attr({
                                    id    : 'upButton',
                                    value : '&#9650;'
                                }).appendTo( $('<li></li>') )
                            )   


                        ).append( $('<li></li>')
                            .append($('<input type="button"></input>') 
                                    .attr({
                                        id    : 'downButton',
                                        value : '&#9660;'
                                    }).appendTo( $('<li></li>') )
                            )
                        )   

                    );

            var timeoutId = 0;
            $('#upButton' , spinnerControl).mousedown(function() {
                console.log('mouse down');
                timeoutId = setInterval(this.rotateSpinner('spinner' , true ) , 200);
            }).bind('mouseup mouseleave', function() {
                console.log('mouse left');
                //clearTimeout(timeoutId);
            });


//      $('#downButton').mousedown(function() {
//          alert('herer');
//          //timeoutId = setInterval("rotateSpinner('spinner' , false ) ", 200);
//      }).bind('mouseup mouseleave', function() {
//          clearTimeout(timeoutId);
//      });

        return spinnerControl;
    };







//class END 
}

このjsファイルでは、エラーがfirebugに表示されます：「参照エラー：rotateSpinner」が定義されていません。

なぜ表示されるのですか？

4

2 に答える 2

2

thisこの場合は '#upButton' である DOM 要素を参照しています。クラスを指す変数を追加するとthis、メソッド内で関数を定義するときの代わりに、この変数を参照できます。

function Spinner( max_value , min_value , div_id ){

var MAX_VALUE = 25;
var MIN_VALUE = -25;
var DEFAULT_VALUE = 0;


this.maxValue = max_value;
this.minValue = min_value;
this.divId    = div_id;
this.spinnerControl; //spinner control object that is populated in getSpinner() method.


this.rotateSpinner = function (spinnerTextBoxId,up) {

    document.getElementById(spinnerTextBoxId).value = up ? parseInt(document
            .getElementById(spinnerTextBoxId).value) + 1 : parseInt(document
            .getElementById(spinnerTextBoxId).value) - 1;
};


this.getSpinner = function( ){
    var self = this;
    spinnerControl = $('<input type="text"></input>')
            .attr('id' , 'spinner')
            .attr('val' , DEFAULT_VALUE)
                .add( $('<ul></ul>')
                    .addClass("spinner")
                    .append(
                        $('<li></li>')
                        .append($('<input type="button"></input>') 
                            .attr({
                                id    : 'upButton',
                                value : '&#9650;'
                            }).appendTo( $('<li></li>') )
                        )   


                    ).append( $('<li></li>')
                        .append($('<input type="button"></input>') 
                                .attr({
                                    id    : 'downButton',
                                    value : '&#9660;'
                                }).appendTo( $('<li></li>') )
                        )
                    )   

                );

        var timeoutId = 0;
        $('#upButton' , spinnerControl).mousedown(function() {
            console.log('mouse down');
            timeoutId = setInterval(self.rotateSpinner('spinner' , true ) , 200);
        }).bind('mouseup mouseleave', function() {
            console.log('mouse left');
            //clearTimeout(timeoutId);
        });


//      $('#downButton').mousedown(function() {
//          alert('herer');
//          //timeoutId = setInterval("rotateSpinner('spinner' , false ) ", 200);
//      }).bind('mouseup mouseleave', function() {
//          clearTimeout(timeoutId);
//      });

    return spinnerControl;
};







//class END 
}
于 2013-07-08T06:22:43.343 に答える
1

この関数の呼び出し方法によって異なります。

次のように呼び出す場合：

Spinner().rotateSpinner(arg1, arg2);

あなたが言及したエラーになります。

正しい使い方は次のとおりです。

new Spinner().rotateSpinner(arg1, arg2);

JavaScript の変数スコープについてもっと学んでおいたほうがよいでしょう。

于 2013-07-08T06:25:58.073 に答える