Question

感谢阅读。我有一个jQuery函数我想原型。该函数简单地将隐藏/显示功能绑定到复选框。每个复选框对应于要隐藏的不同元素。我一直在控制台记录，并且正在创建对象;在控制台上抛出没有其他错误。这个功能有效：

$("input[name='fcrBox']").bind('change', function(){
    if( $(this).is(':checked')){
        $("#result").show();
    } else {
        $("#result").hide();
    }
});

但这不是：

function HideShow(elem, affected) {
this.elem = elem;
this.affected = affected;
}

var fcrBox = new HideShow('input[name="fcrBox"]', '#result');
var sc = new HideShow('input[name="sc"]', '#MQSresult');

console.log(fcrBox);
console.log(sc);

HideShow.prototype.binder = function(elem, affected){
    $(elem).bind('change', function(){
        if( $(this).is(':checked')){
            $(affected).show();
        } else {
        $(affected).hide();
        }
    });
}

fcrBox.binder();
sc.binder();

谢谢！任何意见都将不胜感激。

Answer 1

您使用两个参数（binder和elem）定义了affected，但在调用方法时没有传递任何值。

如果要访问已传递给构造函数并分配给对象的值，则必须显式访问。这些值不会神奇地传递给binder。

function HideShow(elem, affected) {
    this.elem = elem; // <-----------------------------------------------|
    this.affected = affected;                                         // |
}                                                                     // |
                                                                      // |
var fcrBox = new HideShow('input[name="fcrBox"]', '#result');         // |
var sc = new HideShow('input[name="sc"]', '#MQSresult');              // |
                                                                      // |
console.log(fcrBox);                                                  // |
console.log(sc);                                                      // |
                                                                      // |
HideShow.prototype.binder = function(){                               // |
    var self = this; // reference to the instance; this is the same as --|
    $(self.elem).bind('change', function(){
        // In the event handler, `this` refers to the DOM element, not the
        // `HideShow` instance. But we can access the instance via `self`.
        if( $(this).is(':checked')){ // shorter: this.checked
            $(self.affected).show();
        } else {
            $(self.affected).hide();
        }
    });
}

fcrBox.binder();
sc.binder();

JS / jQuery Prototyping问题，可能的范围问题

1 个答案: