Question

所以我正在努力在Javascript中重新创建纸牌游戏Dominion。我正在使用OO Javascript，为每张卡创建一个卡片对象。

不是在这里发布我的所有代码，而是会节省一些空间并将其链接到它：

网站： http://people.rit.edu/lxl1500/Prog4/Project%201/project1.html

脚本： http://people.rit.edu/lxl1500/Prog4/Project%201/main-script.js

我遇到问题的地方：

在我的createActions（）函数中，我正在为每个图像添加一个onclick事件（我通过抓取每个对象的smallImage属性来创建图像）。这个onclick应该调用我的fullImage（）函数。此功能只会显示更大版本的卡，以便玩家可以看到详细信息。因此，我想传递image属性，该属性将较大图像源的字符串保存到函数中。

fullImage（）将接受object属性作为imageSrc。您现在可以通过单击图像看到未定义的警报。我唯一能想到的就是当我调用fullImage（this.image）时 - 这是对图像本身的引用而不是对象...我不知道如何完成我想要做的事情虽然。任何帮助将不胜感激！

感谢您的时间。

Answer 1

您将onclick设置为属性。您可能能够以某种方式使用它，但它是一个更优雅的解决方案来附加事件监听器：

card.addEventListener('click', function() {
    // Handle click.
}, false);

然后你可以正常使用actionCards[i] ...除非你不能，因为i将是最后一个索引的一个，因为我不会进入这里。¹解决这个问题的最简单方法是在将函数添加为事件监听器之前绑定该函数：

card.addEventListener('click', function() {
    // Handle click.
}.bind(actionCards[i]), false);

（我应该注意，bind并非内置在一些旧浏览器中。虽然我的主题是浏览器兼容性，但旧版本的Internet Explorer不支持addEventListener，或者。）然后，您可以使用this来引用您的Card对象。

脚注

¹好的，好的。这是因为JavaScript的功能范围，当用户点击它时，循环已经完成，当循环结束时，i将超过卡的数量。

Answer 2

不确定为什么你有这个.image。图像不是图像元素的属性。记住，将调用onClick事件处理程序，并将此范围设置为onclick发生的元素。将它更改为fullimage（this），你会看到img元素被传入，你可以将你的fullimage方法改为imageSrc.src ='some url';更改图像src属性。

Answer 3

更改fullImage(this.image) 到fullImage(this.src)获取来源。

Answer 4

现代浏览器上的

执行此操作： card.addEventListener（'click'，fullImage.bind（actionCards [i]），false）;

Answer 5

是的，你是正确的，this.src引用没有指向你想要它。单击图像卡时，它会运行javascript

fullImage(this.image)

由于这个javascript没有与调用它的img的任何连接运行，因此Javascript将不知道哪个图像称为它。解决这个问题的一个方法是在设置卡的属性时将正确的src url硬编码到函数调用中，这样：

card.setAttribute("onClick","fullImage(this.image)");

成为这个：

card.setAttribute("onClick","fullImage('" + card.src + "')");

这样，在进行函数调用之前解析了卡的src，并且在调用函数时，它知道要回显哪个src。

希望这有帮助！

编辑以包含引号

使用onclick将Javascript对象属性传递给函数

5 个答案:

脚注