计算两个数字之间的差异在HTML和应用css类

I'm trying to do something which I thought was quite extremely simple, but not having much luck. I have two long lists of scores to compare, each pair sits in its own div. I'm on the lookout for a function which I could specify the div IDs, and have the different reflected in the third div. If the figure is positive, apply one class, and if negative, apply another.

我想做一些我认为非常简单的事情，但运气不太好。我有两个长列表的得分比较,每一对坐在自己的div。我在寻找一个函数,我可以指定div id,并且有不同的反映在第三个div。如果这个数字是正数,应用一个类,如果消极,另一个申请。

<style>
.positive {
color: green;
}
.negative {
color: red;
}
</style>


<div id = "score">50</div>
<div id = "benchmark">30</div>
<div id = "diff"></div>

and in my javascript:

在我的javascript:

$(window).ready(function() {  
    $('#diff').html(diff);
});

var diff = calc("score", "benchmark");

function calc(divID1, divID2) {
      div1 = document.getElementById(divID1);
      metric = div1.innerHTML;
      div2 = document.getElementById(divID2);
      benchmark = div2.innerHTML;
      c = Math.abs(a) - Math.abs(b);
// this is the difference here
      return String(c);  
};

I have D3 and JQuery loaded up. The numbers within the columns of divs are dynamically generated through other functions, so I can't hard code the styling.

我已经加载了D3和JQuery。div列中的数字是通过其他函数动态生成的，所以我无法硬编码样式。

3 个解决方案

#1

You cannot calc() the diff between values of 2 elements when the DOM is not ready yet.

当DOM还没有准备好时，您不能对两个元素的值之间的差异进行calc()。

(Your current ready handler isn't performing the actual calculation but only appending the already miscalculated value to some element).

(当前准备好的处理程序没有执行实际的计算，而只是将已经计算错的值附加到某个元素)。

Try this instead:

试试这个:

$(document).ready(function() {
    var diff = Math.abs($("#score").text()) - Math.abs($("#benchmark").text());
    $('#diff').html(diff).addClass(diff > 0 ? 'positive' : 'negative');
});

Also, I changed your $(window).ready() to $(document).ready() instead.

另外，我将您的$(窗口).ready()改为$(文档).ready()。

#2

You have some errors in your code. You can call calc function when the document is ready and handle the result there. I sum it up to this:

您的代码中有一些错误。当文档准备好时，您可以调用calc函数并在那里处理结果。我总结如下:

$(document).ready(function() {
  //get the result of your calc function
  var diff = calc("score", "benchmark");
  //display the result and add class depend of the returning value
  $('#diff').html(diff).attr("class", diff > 0 ? "positive" : "negative");
});



function calc(divID1, divID2) {
  //get first number
  var div1Num = parseInt($("#" + divID1).text(), 10);
  //get second number
  var div2Num = parseInt($("#" + divID2).text(), 10);
  //make the calculation
  var result = div1Num - div2Num;
  //return the result
  return result;
};

.positive {
  color: green;
}
.negative {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="score">50</div>
<div id="benchmark">30</div>
<div id="diff"></div>

Another example with negative result:

另一个负面结果的例子:

$(document).ready(function() {
  //get the result of your calc function
  var diff = calc("score", "benchmark");
  //display the result and add class depend of the returning value
  $('#diff').html(diff).attr("class", diff > 0 ? "positive" : "negative");
});



function calc(divID1, divID2) {
  //get first number
  var div1Num = parseInt($("#" + divID1).text(), 10);
  //get second number
  var div2Num = parseInt($("#" + divID2).text(), 10);
  //make the calculation
  var result = div1Num - div2Num;
  //return the result
  return result;
};

.positive {
  color: green;
}
.negative {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="score">10</div>
<div id="benchmark">30</div>
<div id="diff"></div>

Edit: You can replace parseInt with parseFloat according to your needs.

编辑:可以根据需要用parseFloat替换parseInt。

References

参考文献

.attr()

#3

You can use following statement in js to get expected output.

您可以在js中使用以下语句来获得预期的输出。

score = jQuery('#score').text();
benchmark = jQuery('#benchmark').text();
if(Math.abs(score) > Math.abs(benchmark))
{
    jQuery('#diff').text('Positive');
    jQuery('#diff').addClass('positive');
}
else
{
     jQuery('#diff').text('Negative');
     jQuery('#diff').addClass('negative');
}

You can check example on this link- http://jsfiddle.net/o3k6u99p/1/

您可以查看这个链接的示例—http://jsfiddle.net/o3k6u99p/1/

#1