0

我在 Javascript 类中从另一种方法调用一个方法时遇到问题。

这是代码

    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指的是 DOM 元素，在这种情况下是“#upButton”。如果您添加一个指向该类的变量，那么您可以参考这个变量，而不是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 回答