Question

我有一个问题，我不知道如何解决。下面的脚本显示股票及其当前价值。我要添加的一件事是，如果股票具有正值，则为绿色;如果股票具有负值，则为红色。

如何根据当前值更改每行div“value”的颜色？

$(document).ready(function stocks() {

  var value = "";
  var name = "";
  var substring = "-";

  $.getJSON("https://finance.google.com/finance/info?client=ig&q=TSLA,HM-B,AAPL&callback=?", function(json) {
    json.forEach(function(v) {

      //if(v.cp.includes(substring)){
      //}
      //
      //else{
      //} 

      name += v.t + "<br>";
      value += v.cp + " %" + "<br>";

      document.getElementById('name').innerHTML = name;
      document.getElementById('value').innerHTML = value;
    });
    setTimeout(stocks, 10000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div id="name" style="float:left ; padding-right:10px"></div>
  <div id="value" style="text-align:right; width:140px"></div>
</div>

Answer 1

您可以使用以下结构更改页面上元素的背景样式：

document.getElementById('value').style.background = 'here is your color'.

所以，你可以直接替换

"document.getElementById('value').innerHTML = value;"

由此：

const valueElement = document.getElementById('value');
const color = (v.cp > 0) ? 'greeen' : 'red';
valueElement.innerHTML = value;
valueElement.style.background = color;

而不是改变＆＃34;背景＆＃34;您可以随意更改任何其他属性（颜色，宽度等）

Answer 2

您可以拨打yourElement.style.color并将其设置为绿色或红色

＆＃13;

var value = "";
var name = "";
var substring = "-";

var nameElement = document.getElementById('name');
var valueElement = document.getElementById('value');

$.getJSON("https://finance.google.com/finance/info?client=ig&q=TSLA,HM-B,AAPL&callback=?", function(json) {
  json.forEach(function(v) {
    name += v.t + "<br>";
    value += v.cp + " %" + "<br>";
     
    valueElement.style.color = v.cp < 0 ? "red" : "green";
    
    nameElement.innerHTML = name;
    valueElement.innerHTML = value;
  });
  setTimeout(stocks, 10000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<div id="name"></div>
<div id="value"></div>

＆＃13;

Answer 3

您可以定义变量颜色并将值包裹在范围内，并根据值将颜色设置为范围

见下面的代码

$(document).ready(function stocks() {

  var value = "";
  var name = "";
  var substring = "-";

  $.getJSON("https://finance.google.com/finance/info?client=ig&q=TSLA,HM-B,AAPL&callback=?", function(json) {
      json.forEach(function(v) {

          //if(v.cp.includes(substring)){
          //}
          //
          //else{
          //} 

          var color = 'green';
          if (v.cp < 0) {
            color = 'red';
          }

          name += v.t + "<br>";
          value += '<span style="color:' + color + '">' + v.cp + " %" + "</span><br>";

          document.getElementById('name').innerHTML = name;
          document.getElementById('value').innerHTML = value;




      }); setTimeout(stocks, 10000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div id="name" style="float:left ; padding-right:10px"></div>
  <div id="value" style="text-align:right; width:140px"></div>
</div>

Answer 4

只要parseFloat值v.cp，如果它大于零，则应用绿色，否则应用红色。请查看以下示例。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <script>
    $(document).ready(function stocks() {

      var value = "";
      var name = "";
      var color = "";

      $.getJSON("https://finance.google.com/finance/info?client=ig&q=NDRO,HM-B,AAPL&callback=?", function(json) {

        json.forEach(function(v) {
          if (parseFloat(v.cp) > 0)
            color = 'green';
          else
            color = 'red';

          name += v.t + "<br>";
          value += "<span style='color:" + color + "'>" + v.cp + " %</span><br>";

          document.getElementById('name').innerHTML = name;
          document.getElementById('value').innerHTML = value;

        });
        setTimeout(stocks, 10000);
      });
    });
  </script>
</head>

<body>
  <div>
    <div id="name" style="float:left ; padding-right:10px">
    </div>
    <div id="value" style="text-align:right; width:140px">
    </div>
  </div>
</body>

</html>

如何根据对象值

4 个答案: