0

所以我正在努力用 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() 将接受对象属性作为 imageSrc。您现在可以通过单击图像看到未定义的警报。我唯一能想到的是当我调用 fullImage(this.image) - 这是对图像本身而不是对象的引用......我不知道如何完成我想要做的事情. 任何帮助将不胜感激！

感谢您的时间。

4

5 回答 5

0

您正在设置onclick为属性。您也许可以以某种方式使用它，但附加事件侦听器是一个更优雅的解决方案：

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

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

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

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

脚注

1好的，好的。这是因为 JavaScript 的函数作用域，当用户点击它时，循环结束了，当循环结束时，i卡片的数量会加一。

于 2013-01-12T03:25:04.160 回答
0

不知道为什么你有this.image。图像不是图像元素的属性。请记住，将调用 onClick 事件处理程序，并将此范围设置为发生 onclick 的元素。将其更改为 fullimage(this) ，您会看到 img 元素已传入，然后您可以将 fullimage 方法更改为 imageSrc.src = 'some url'; 更改图像 src 属性。

于 2013-01-12T03:25:56.503 回答
0

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

于 2013-01-12T03:27:28.000 回答
0

在现代浏览器上这样做：card.addEventListener('click', fullImage.bind(actionCards[i]), false);

于 2013-01-12T03:33:15.673 回答
0

是的，你是正确的 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。

希望这可以帮助！

编辑以包含引号

于 2013-01-12T03:37:18.367 回答