- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我已经将 JavaScript 插件“Skycons”连接到雅虎天气 RSS 提要。我遇到的问题是多天可能会有相同的天气预报,并且因为插件从 ID 而不是类中提取图标,所以我无法再次提取相同的图标。
例如,除了最后一个 li 实例之外,下面的所有图标都会显示 - 因为我重复了 id 雪:
<ul class="days">
<li class="col-md-3 col-sm-3 col-xs-3"><strong>Saturday</strong>
<canvas id="snow" width="50" height="50"></canvas>
<span>19°</span>
</li>
<li class="col-md-3 col-sm-3 col-xs-3"><strong>Sunday</strong>
<canvas id="rain" width="50" height="50"></canvas>
<span>19°</span>
</li>
<li class="col-md-3 col-sm-3 col-xs-3"><strong>Monday</strong>
<canvas id="sleet" width="50" height="50"></canvas>
<span>19°</span>
</li>
<li class="col-md-3 col-sm-3 col-xs-3"><strong>Wednesday</strong>
<canvas id="snow" width="50" height="50"></canvas>
<span>19°</span>
</li>
</ul>
这是我的初始化 JS:
<!--SkyCons-->
<script type="text/javascript" src="js/vendors/skycons/skycons.js"></script>
<script>
var icons = new Skycons({"color": "#fff"}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for(i = list.length; i--; )
icons.set(list[i], list[i]);
icons.play();
</script>
这里是引用的 JS 文件的链接:
https://github.com/darkskyapp/skycons/blob/master/skycons.js
最佳答案
您应该使用适用于元素引用的版本,而不是 id
(并更改 html 以使用类而不是 id)
for(i = list.length; i--; ) {
var weatherType = list[i],
elements = document.getElementsByClassName( weatherType );
for (e = elements.length; e--;){
icons.set( elements[e], weatherType );
}
}
并将您的 html 更改为
<li class="col-md-3 col-sm-3 col-xs-3"><strong>Saturday</strong>
<canvas class="snow" width="50" height="50"></canvas>
<span>19°</span>
</li>
<li class="col-md-3 col-sm-3 col-xs-3"><strong>Sunday</strong>
<canvas class="rain" width="50" height="50"></canvas>
<span>19°</span>
</li>
<li class="col-md-3 col-sm-3 col-xs-3"><strong>Monday</strong>
<canvas class="sleet" width="50" height="50"></canvas>
<span>19°</span>
</li>
<li class="col-md-3 col-sm-3 col-xs-3"><strong>Wednesday</strong>
<canvas class="snow" width="50" height="50"></canvas>
<span>19°</span>
</li>
如果您需要支持 IE8 及更早版本,您需要为 getElementsByClassName
函数使用此 polyfill:Polyfill for getElementsByClassName for particular uses
关于javascript - Skycons,不能两次显示相同的图标吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24572100/
我正在创建一个基本的天气应用程序。它从开放天气API获取天气数据,然后显示温度和位置。我找到了 SKYCONS,并认为它们是向我的应用程序添加图标的一种很好且简单的方法。然而,他们不会出现。
我已经将 JavaScript 插件“Skycons”连接到雅虎天气 RSS 提要。我遇到的问题是多天可能会有相同的天气预报,并且因为插件从 ID 而不是类中提取图标,所以我无法再次提取相同的图标。
我正在使用基于此 youtube video 的天气应用程序 我有以下 code并且正在使用 Skycons.js 我现在遇到的问题是我正在尝试在其中实现暗模式。我的大部分功能都在运行,但是当我的暗模
我为免费代码营制作了这个天气应用程序,我决定使用 Skycons 的一些图标:http://darkskyapp.github.io/skycons/ 但是,无论我多么努力,我都无法更改页面上图标的对
我在执行 Skycons 时遇到问题在我的 Angular 2 应用程序中。我已经通过 npm i skycons 安装了 Skycons。 typings.d.ts declare module '
我正在使用 Skycons,它工作得非常好。但是当我有 2 个 Canvas ID 时,它会渲染第一个,但另一个将为空白。 在 JS 中我有: var icons = new Skycons({
作为我的第一个使用 API 的应用程序,我决定使用 Dark Sky API。我正在尝试为从 JS 文件生成的每个预测日添加动画 Skycons。我已阅读 StackOverflow 上有关 Skyc
我是一名优秀的程序员,十分优秀!