JS/jQuery 原型设计问题，可能的范围问题

JS/jQuery Prototyping Issue, possible scoping concerns

本文关键字：问题范围 jQuery 原型 JS 更新时间：2023-09-26

感谢您的阅读。我有一个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();

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

您使用两个参数(elem 和 affected (定义了 binder，但在调用该方法时不会传递任何值。

如果要访问已传递给构造函数并分配给对象的值，则必须显式访问这些值。这些值不会神奇地传递给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();