douchi8503 2014-11-19 14:35
浏览 104
已采纳

AJAX / jQuery:根据数值改变DIV背景?

I am new with AJAX/jQuery and trying something new.

here is my fiddle for better understanding Each of those squares are DIVS.

<div class="desk_box_ver" id="desk_B20" data-rel="85" style="left:20px;top:1165px;">B20</div>

The number inside of is being retrieved with an AJAX call that GETs it with a PHP script executing a query, it will replace the "B20" for "1300" as an example.

Problem:

How can I produce a "heat map" based on the numbers being displayed. Example: Lets say the number range is from 100(the lowest) to 1800(the highest). Depending on the number range, a background color will have to be displayed from green-ish, to yellow-ish, orange-ish, and red.

A similar problem I found on stackoverflow is this one

AJAX:how I am displaying the numbers inside of the DIVs

<script type="text/javascript">
            $(document).ready(function() {
                $('#aht').click(function(){
                    $.ajax({
                    type:"GET",
                    url : "show_aht.php",
                    data:{  } , // do I need to pass data if im GET ting?
                    dataType: 'json',
                    success : function(data){
                        //going through all DIVs only once with this loop
                            for(var i = 0; i < data.length; i++) { // loop over results
                            var divForResult = $('#desk_' + data[i]['station']); // look for div for this object
                            if(divForResult.length) { // if a div was found

THIS IS WHERE I AM OUTPUTTING THE NUMBER

      divForResult.html(data[i]['aht_value']); // set inner HTML with AHT value


                            }//end if
                            }//end for
                      }//end success
                });//end ajax
              });//end click
            });//end rdy
        </script>

show_aht.php numbers being retrieved from the array below

$result = array();
    foreach ($memo as $username => $memodata) {
    if (in_array($username, array_keys($user))) {
    // Match username against the keys of $user (the usernames) 
    $userdata = $user[$username];
    //if AHT is null give N/A as value
    if (is_null($memodata['aht_value'])) {
        $result[] = array( 'username'  => $userdata['username'],
                                             'aht_value' => 'NA',
                                             'station'  => $userdata['station']
                                            );
    }//end inner if 
    //else give the actual value of AHT without the decimals
    else {
        $result[] = array( 'username'  => $userdata['username'],
                                             'aht_value' => substr($memodata['aht_value'],0,-3),
                                             'station'   => $userdata['station']
                                            );
    }//end else
    }//end outer if
    }//end for

echo json_encode($result);
  • 写回答

3条回答 默认 最新

  • dqqfuth6736 2014-11-19 14:58
    关注

    Have a play with this fiddle. It inserts a value and then applies a color to is (using a very simple algorithm that you will want to change). Here's how you could implement it in your code

    success : function(data){
      for(var i = 0; i < data.length; i++) { // loop over results
        var divForResult = $('#desk_' + data[i]['station']); // look for div for this object
        if(divForResult.length) { // if a div was found
           divForResult.html(data[i]['aht_value']).css("background-color", colorMe(data[i]['aht_value']));
        }//end if
      }//end for
    }//end success
    

    Make these available in your code:

    function colorMe(v){
        return "rgb(" + conv(v) + "," + (255-conv(v)) + ",0)";
    }
    
    function conv(x){
        return Math.floor((x - 100) / (1800-100) * 255);
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题