javascript - JS/jQuery 原型问题，可能的范围问题

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();