使用 jQuery 设置 <canvas> id答案

【问题标题】：Setting <canvas> id with jQuery使用 jQuery 设置 <canvas> id
【发布时间】：2017-06-22 06:22:57
【问题描述】：

早上好！

我正在尝试更改画布元素内的图标 ID。

这对我来说看起来不错，但肯定有一些我不太明白的东西，因为它不起作用（页面上没有显示图标，只是空白）并且控制台没有返回任何错误。如果有帮助，“天气”是一个字符串。

<canvas id="wIcon" width="150" height="150"></canvas>
----------
$("#wIcon").prop("id",weather);

提前致谢！

编辑：更准确地说，

HTML：

<script src="https://rawgithub.com/darkskyapp/skycons/master/skycons.js"></script>
<!--not relevant HTML-->
<canvas id="snow" width="64" height="64"></canvas>
<!--not relevant HTML-->

JS：

var icons = new Skycons({"color": "orange"});

icons.set("clear-day", Skycons.CLEAR_DAY);
icons.set("clear-night", Skycons.CLEAR_NIGHT);
icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
icons.set("cloudy", Skycons.CLOUDY);
icons.set("rain", Skycons.RAIN);
icons.set("sleet", Skycons.SLEET);
icons.set("snow", Skycons.SNOW);
icons.set("wind", Skycons.WIND);
icons.set("fog", Skycons.FOG);

我想做的是通过更改其 ID 将文档中显示的 icon 更改为集合中的另一个 icon。相关字符串存储在天气变量中，所以我认为根据我在天气中的情况很容易从一个更改为另一个：

$("#snow").prop("id",weather);

或者，按照这里的建议，

$("#snow").attr("id",weather);

听起来我对这个画布的理解不够，所以我转向了另一个解决方案，即使用Weather Icons，它在图标上使用 .addClass 效果很好（如果你好奇，请参阅Pen，并且甚至可能想给我一些建议！），但如果找到解决方案，我还是把这个问题留在这里以供将来参考。

【问题讨论】：

id 不是一个属性，而是一个属性，你也已经拥有画布的 id
@guradio 哼什么？ id 既是 HTML 属性，又是 Element 属性。通过修改属性，您还将修改属性，通过修改属性，您也将修改属性。
您的问题真的很不清楚：“canvas 元素内的图标 id”是什么意思？画布元素内部不能有任何可见的东西（实际上，IIRC 唯一允许的内容是input 标记以允许键盘焦点）。你说的这个图标是什么？这类似于通过 CSS 设置的 bg-image 吗？如果是这样，请向我们展示您的 CSS。这是在画布的上下文中绘制的一些绘图吗？如果是这样，请向我们展示您的 js。
所以是的，您必须告诉您的 js 插件您确实更改了画布的 id，我希望它不会检查每个毫秒以查看它是否应该更新。但是如果没有过多地研究插件，我猜一个简单的icons.set("snow", Skycons.FOG); 会将你的雪图标更改为雾图标。但是现在，我不确定您在等待什么答案...也许最好删除？
好吧，问题可能是“为什么 $("#snow").attr("id",weather); 不起作用？” :D，哦，顺便说一句：它只在文档准备好时才发生变化。

标签： javascript jquery html canvas

【解决方案1】：

使用.attr() 方法。此外，您选择的是画布，而不是图标。

你可以做类似的事情

<canvas id="wCanvas" width="150" height="150">
  <img id="wIcon" src="...">
</canvas>

$("#wIcon").attr("id", weather);

【讨论】：

@FabioMancin 您使用的是什么版本的 jquery，因为它工作得很好
3.2.1/jquery.min.js，不工作。如果我在 HTML 中手动设置图标的 id，图标会发生变化，但是当我使用 jQuery 动态执行此操作时拒绝更改。
@FabioMancin 检查您是否正确加载了 jquery。

【解决方案2】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<canvas id="wIcon" width="150" height="150"></canvas>
<script>
//$("#wIcon").prop("id","weather");
$("#wIcon").attr("id","weather");
   </script>

尝试在 id 的 prop 中给出属性而不是 prop 或给出 ""

【讨论】：

不走运。也许图标在一组中很重要？
试试这个 $("#wIcon").prop("id","weather"); .当它以 $("#wIcon").prop("id",weather) 给出时显示“未捕获的 ReferenceError：天气未定义”