[英]Javascript: Calling a function from an array of objects
I have an array of objects and I am building a page with those objecs The objects have an image, image will be clickable and I want to count the clicks per image. 我有一个对象数组,并且正在使用这些objecs构建页面。这些对象都有一个图像,该图像将是可单击的,并且我想计算每个图像的点击次数。 I am trying to assign the value for clicks from each object to "tclicks" and than hand "tclicks" over to the onclick function to count the clicks separately. 我试图将每个对象的点击值分配给“点击”,然后将“点击”移交给onclick函数以分别计算点击。 I am not sure if that works. 我不确定是否可行。
My current problem is that the value appears as NaN when the onclick function gets executed. 我当前的问题是,在执行onclick函数时,该值显示为NaN。 I am aware that I need to assign a starting value to clicks. 我知道我需要为点击分配一个初始值。 I tried it in various places. 我在不同的地方尝试过。 In the object, in the function outside of the function. 在对象中,在函数外部。 Either the value was not counting up, or I got an error as the element was set to 0 Where can I assign the starting value? 值未加计数,或者元素设置为0时出现错误,我可以在哪里分配起始值?
This is the array 这是数组
var things =
[
{img : "cat.jpg",
tclicks: "cleo_clicks",
id : "cleo"
},
{img : "shimi.png",
tclicks: "shimi_clicks",
id : "shimi"
}
]
This is how I am building the page for ( var i= 0; i < things.length; i++){ 这就是我为(var i = 0; i <Things.length; i ++){
var x = document.createElement("IMG");
x.setAttribute("src", things[i].img);
x.setAttribute(tclicks, things[i].clicks);
x.setAttribute("onclick", "countClicks(tclicks)");
document.body.appendChild(x);
}
And this is my onclick functions 这是我的onclick函数
function countClicks(clicks){
clicks ++;
console.log(clicks)
}
There's no reason you can't assign clicks=0 where you define the array of objects like this: 没有理由您不能在定义对象数组的情况下分配clicks = 0:
var things = [
{
img: "cat.jpg",
tclicks: "cleo_clicks",
id: "cleo",
clicks: 0
},
{
img: "shimi.png",
tclicks: "shimi_clicks",
id: "shimi",
clicks: 0
}
];
...but that's only half the problem. ...但这只是问题的一半。
In your click-increment function: 在点击增量功能中:
function countClicks(clicks) {
clicks++;
console.log(clicks);
}
...you will never affect a change on any object's click property because Javascript passes function parameters by value ( https://en.wikipedia.org/wiki/Evaluation_strategy#Call_by_value ). ...您永远不会影响任何对象的click属性的更改,因为Javascript按值传递函数参数( https://en.wikipedia.org/wiki/Evaluation_strategy#Call_by_value )。
You need to pass in the entire object to the function and allow it to modify the property value instead: 您需要将整个对象传递给函数,并允许它修改属性值:
function countClicks(someObject) {
someObject.clicks++;
console.log(someObject.clicks);
}
...which means you need to change how the function is called, something like: ...这意味着您需要更改函数的调用方式,例如:
x.setAttribute("onclick", "countClicks(things[i])");
Note: above assumes things array is global, otherwise you'll need to further refactor. 注意:以上假设事情数组是全局的,否则您将需要进一步重构。
Final note, calling JS pass-by-value is simplifying a little. 最后说明,调用JS传递值可以简化一点。 You ca dive into the issue more here: Is JavaScript a pass-by-reference or pass-by-value language? 您可以在此处进一步探讨该问题: JavaScript是引用传递还是值传递语言?
Yep. 是的。 Use an object and don't write it hard as onClick. 使用一个对象,不要像onClick那样难写。 It's too dangerous. 太危险了 You could override it. 您可以覆盖它。 Use an eventListener instead. 请改用eventListener。
function CountClicks(config){
var img = config.img;
var tclicks = config.tclicks;
var id = config.id;
var clicks = 0;
return{
countUp: function(){
clicks++;
},
countDown: function(){
clicks--;
},
getCount: function(){
return clicks;
}
}
}
x.counter = new CountClicks(things[i]);
x.addEventListener('click', function(){this.counter.countUp()});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.