个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在尝试设置 38 个动态创建的 span 元素的 css 颜色属性，这些元素填充了 API JSON 响应数据(实时证券交易所)。
带有 .change 的每个跨度元素都包含一个表示股价变化的数值。正如我们习惯的那样，每个变化指示器都应该根据其值具有特定的颜色。意思是，如果值 < 0，它应该显示为红色，如果值 > 0，它应该显示为绿色，如果值 = 0，则不应采取任何操作。
在我的 jQuery 脚本中，API 请求工作正常，我仅将其作为相关上下文包含在内。 我的问题 是 .change 元素的内部 html 的后续着色，实际上应该根据上述规则进行着色。
我猜 css() 方法无法正常工作，因为在页面 DOM 准备就绪后，JSON 数据被拉入文档。在这种情况下，实现适当的回调应该可以完成这项工作，但我不确定该怎么做。任何关于解决着色问题的方法或其他方法的建议都将非常有帮助!
请看下面我的代码。我感谢您的任何建议!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style type='text/css'>
#magic-line {font-size: 90%;}
#gse-primer {padding: 0; text-align: center;}
#gse-wrapper {overflow: hidden;}
.stocks {display: inline-block; width: 120px; text-align: center;}
#gse {animation-name: slide; animation-duration: 90s; animation-iteration- count: infinite; animation-timing-function: linear; white-space: nowrap;}
@keyframes slide {from {margin-left: 0px;} to {margin-left: -4560px;}}
</style>
</head>
<body>
<div id='magic-line' class='col-xs-12'>
<div id='gse-primer' class='hidden-xs col-sm-2'>Share Price:<br>Vol. Traded</div>
<div id='gse-wrapper' class='col-sm-10'><span id='gse'></span></div>
</div>
<!-- jQuery Google CDN -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type='text/javascript'>
// API request for stock data
$(document).ready(function() {
$.getJSON("http://dev.kwayisi.org/apis/gse/live?callback=?", function(data) {
console.log(data);
$.each(data, function(i, value) {
$("#gse").append("<div class='stocks'>" + " " + "<b>" + value.name + "</b>" + " " + value.price + " " + "<span class='change'>" + value.change + "</span>" + "<br>" + value.volume + "</div>");
});
});
});
// adding color to indicate changes in share prices
$(document).ready(function() {
$('.change').each(function(i, obj) {
if ($(this).val() < 0) { $(this).css('color','#E60000'); }
else if ($(this).val() > 0) { $(this).css('color','#32cd32'); }
else { };
});
});
</script>
</body>
</html>
最佳答案
当您打印值时，在 span 元素中添加一个属性
<span class='change' data-change='" + value.change + "'>" + value.change + "</span>
因此在 CSS 中使用属性选择器来正确设置元素的样式
[data-change] { /* color for positive values */ }
[data-change="0"] { /* color for zero value */ }
[data-change^="-"] { /* color for negative values */ }
这样做可以将样式部分与 javascript 部分分开，并且可以避免对 jQuery 库的无用且昂贵的调用(这对维护和性能都有好处)
关于jquery - 如何给股价变化上色 : using css() method on dynamically created elements?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36283335/
24
4
0
如何将多个json对象添加/映射到dart对象 import 'dart:async'; import 'dart:convert'; import 'package:flutter/foundati
我正在研究将产品集成到 Dynamics Great Plains 中。我之前使用过 Dynamics CRM，但没有使用过 Great Plains。我听说 GP 与 CRM 是不同的动物，即使它们
System.Linq.Dynamic.Core 和 System.Linq.Dynamic 有什么区别？我目前正在使用 System.Linq.Dynamic 并且它不包含对 的支持选择 和 多选
我正在尝试通过Firebase存储将图像上传到Firebase，然后在Firestore中创建一个文档，其中包含上述上传图像的网址。为此，我使用此功能 void uploadImageAndCr
我一直在尝试整理一些东西，使我可以从 ListPlot 中提取点，以便在进一步的计算中使用它们。我目前的方法是使用 Locator[] 选择点。这适用于显示点，但我无法弄清楚如何从带有 head Dy
只要我在与 Program 类相同的程序集中有类 ClassSameAssembly ，下面的代码就可以正常工作。但是，当我将类 ClassSameAssembly 移动到单独的程序集时，会引发 Ru
我只是尝试从Firebase实时数据库解析数据。 但在转换为模型时有问题 我正在尝试从Flutter上解析Firebase数据库中的数据。 但是一个错误说 MY Complete QUIZ: {-M5
我创建了一个方法，当我构建它时，出现了这个错误: type '_InternalLinkedHashMap' is not a subtype of type 'List' in type cast
我对这个 flutter 的简单图表代码有疑问。在我尝试运行代码时显示此错误。请任何人都可以帮助我在这.... The argument type 'List>' can't be assigned
我尝试在我的 flutter 应用程序中解析来自 Firestore 的文档。 Firestore 文档: 我创建了两个类来解析这个文档。 类产品: class Produkt{ String n
我有一个2d-List，其中包含一个字符串和一个Map，如下所示: List> content = [ [ "String", { "one": 23,
我使用 Dart“json_serializable”包在 Flutter 应用程序中的 Firestore 数据结构下反序列化。 { googleBookId: jjl4BgAAQBAJ, prov
我注册了 Dynamic CRM 在线试用版(30 天)并创建了一个非托管自定义解决方案(新字段、一些自定义实体等)。现在，我想导出非托管解决方案并将其导入到我的服务器中的 Dynamic CRM O
当我尝试从 StreamTransform 获取一些数据时遇到一些问题 我不明白什么是正确的数据类型 未捕获的异常:类型错误:“_StreamHandlerTransformer”的实例:“_Stre
我正在尝试获取用户数据，但在这样做时出现以下错误: Exception: type '_InternalLinkedHashMap' is not a subtype of type 'Map 我查看
我正在尝试在 sqflite 数据库中保存一些带有 flutter 的数据，但我仍然收到一条错误消息: [ERROR:flutter/shell/common/shell.cc(181)] Dart
我有一个JSON响应，结构如下：。在这个JSON响应中，有各种动态键，如“Owner”和“Master”，每个键都包含一个JSON对象或一个JSON对象数组。我需要创建一个gson数据类来解析这个动态
在 Dynamics 2012 ax 中编译 CIL 时，我看到以下错误 - 名称为“Dynamics.Ax.application”的重复类型。在程序集中“Dynamics.Ax.applicati
我有一个带有 LinkedHashMap 成员的 StatefulWidget 小部件，如下所示: LinkedHashMap _items = new LinkedHashMap>(); 现在我需要
我正在尝试按照此处所述实现搜索资源功能:https://cloudblogs.microsoft.com/dynamics365/it/2019/05/21/retrieve-resource-ava
我是一名优秀的程序员,十分优秀！