Вопрос:
У меня проблема, что я не знаю, как ее решить. В приведенном ниже сценарии отображаются запасы и текущее значение. Одна вещь, которую я хочу добавить, это зеленый цвет, если запас имеет положительное значение и красный, если у акции есть отрицательное значение.
Как изменить цвет значения div для каждой строки в зависимости от текущего значения?
$(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>Лучший ответ:
вы можете определить цвет переменной и обернуть значение в диапазоне и установить диапазон цвета в соответствии со значением
см. ниже код
$(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>Ответ №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;
Вместо изменения свойства “background” вы можете изменить любой другой (цвет, ширина и т.д.),
Ответ №2
Вы можете вызвать yourElement.style.color и установить его на зеленый или красный
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); });<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>Ответ №3
Просто 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>