Question

我正在创建一个包含HTML，CSS和Javascript的产品定制器，并且我已经设置了一个名为“Component”的自定义对象。我正在为每个产品的每个组件创建一个新的Component实例，其中包含“new”关键字，因为它们将根据用户输入独立操作。每个组件在HTML中都有一个div，如下所示：

<div class="component" id="ABC123">
                <div class="checkBox"><div class="checkmark"> </div>  </div>
                <div class="nameLabel"><h4>ABC-123</h4> </div>
                <div class="priceLabel"><h5 id="ABC123-PRICE"></h5> </div>
            </div> <!-- ABC 123 -->

这是相关的javascript：

function Component(id, model, htmlid, cost) {
this.id = id;
this.model = model;
this.htmlid = htmlid;
this.cost = cost;
this.element = document.getElementById(htmlid);
this.picture = document.getElementById(htmlid + "-PIC");
this.plabel = document.getElementById(htmlid + "-PRICE");
this.active = false;

//****This is the problem line:****
//this.element.onclick = function() {
//                             selectUnselect(this);
//                          };
//this.element.onclick = selectUnselect(this);
}


// Set: VAR NAME, MODEL, HTML ID, COST
var ABC123 = new Component(ABC123, ABCSeries, "ABC123", 100);
var DEF456 = new Component(DEF456, ABCSeries, "DEF456", 200);
var GHI789 = new Component(GHI789, ABCSeries, "GHI789", 300);


function selectUnselect(component) {
console.log(component);
//Simplified for troubleshooting
}

就组件而言，我将为每种不同的产品提供大约10个，所以我想自动化这个过程，而不是写一行如下：

ABC123.element.onclick = function() {
    selectUnselect(ABC123);
    };

每个组件。我在这里只包含了一些组件来提出这个想法。

注意到的“问题行”下的两行注释代码是我尝试过的两件事 - 我的目标是让每个添加的组件在其元素（div中的div）中将其变量传递给selectUnselect函数。单击html）。

第一个注释行导致console.log在任何时候点击其中一个组件div时打印出“undefined”。
第二个注释行正确打印出每个Component实例，但在页面加载时自动执行，并且不响应点击事件。

如果在为Component的每个实例单击它时，如何将变量传递给函数？

Answer 1

第一行的问题在于，在javascript中，当函数未被调用为方法（myObj.myFunc（））时，'this'变量未绑定到声明函数的对象上下文，它相当于全局对象。

在你的情况下，'this'绑定到触发HTML元素 - 因为DOM事件（例如onclick）总是如此。

'component'实际上应该为您提供触发点击的HTML元素。

第二行的问题是您执行该函数并将结果分配给onclcik处理程序。

要修复第一行，您要执行的操作如下：

that = this;
this.element.onclick = function(){
  selectUnselect(that);
};

它起作用的原因是虽然函数没有绑定到它声明的对象上下文的“this”，但声明函数的对象上下文的所有其他变量都是可见的。

将onclick设置为自定义对象的每个实例并将属性传递给函数

1 个答案: