Question

我想达到显示总数的百分比值。这是小提琴

`http://jsfiddle.net/binoymat/d9f8t9vj/11/`

这是我完整的HTML代码

<select id="category"></select>
<select id="category1"></select>
<select id="category2"></select>
<select id="category3"></select>
<br>
<br>
<div class="row">
<div class="col-sm-2 " id="services_block" style="width: 230px;height:100px; background-color: orange;color: white; line-height: 30px; text-align: center; font-size: 100%;  font-weight: bold; border-left:3px solid white; >
Visitors <br> CURRENT DAY<br>
<span id="totalVisitorsCurrentDay" style="color: black; font-size: 150%;  font-weight: bold;" > </span>
</div>
<br>


<div class="col-sm-2" id="services_block" style="width: 180px;height: 100px;  background-color: red;color: white;line-height: 30px; text-align: center; font-size: 100%;  font-weight: bold; border-left:3px solid white;>
Visitors  
<br> PAST DAY
<br>
    <span id="totalVisitorsPastDay" style="color: black; font-size: 150%;  font-weight: bold;"></span>
    </div>
<br>

<div class="col-sm-2" id="services_block" style="width: 180px;height: 100px;  background-color: red;color: white;line-height: 30px; text-align: center; font-size: 100%;  font-weight: bold; border-left:3px solid white;
border-right:3px solid white;">Visitors 
<br> PAST WEEK
<br>
 <span id="totalVisitorsPastWeek" style="color: black; font-size: 150%;  font-weight: bold;"></span>
  </div>
  </div>
  <br>

完成Jquery代码

$.getJSON("https://api.myjson.com/bins/2soxd", function (data) {
//code inside
var items = data;
var checkIds = [];
$.each(items, function (k, v) {
    if ($.inArray(v.id, checkIds) == -1) {
        $("#category").append('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.chains + '</option>');
        checkIds.push(v.id);
    }
});

$("#category").on('change', function () {
    var dept_number = parseInt($(this).val());
    var price = $(this).find(':selected').data('price');
    var tochange = false;
    var total = 0;
    var totalVisCurrDay= 0;
    var totalVisPasDay= 0;
    var totalVisPasWeek= 0;
    $.each(items, function (k, v) {
        if (v.id == dept_number) {
            if (tochange == true) {
                $("#category1").append('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.site + '</option>');
                $("#category2").append('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.zone + '</option>');
                $("#category3").append('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.date + '</option>');
            } else {
                $("#category1").html('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.site + '</option>');
                $("#category2").html('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.zone + '</option>');
                $("#category3").html('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.date + '</option>');
                tochange = true;
            }
            total += v.visitors;
            totalVisCurrDay += v.visitorscurrday;
            totalVisPasDay += v.visitorspastday;
            totalVisPasWeek += v.visitorspastweek;
        }
    });
    $('#dept-input').val(dept_number);
    $('#price-input').val(total);
    $("#totalVisitors").text(total);
    $("#totalVisitorsCurrentDay").text(totalVisCurrDay);
    $("#totalVisitorsPastDay").text(totalVisPasDay);
    $("#totalVisitorsPastWeek").text(totalVisPasWeek);
}).change();

$("select[id^='category']:not(#category)").on('change', function () {
    var dept_number = parseInt($(this).val());
    var price = $(this).find(':selected').data('price');
   var VisitorsCurrentDay = $(this).find(':selected').data('visitorscurrday');
  var VisitorsPastDay = $(this).find(':selected').data('visitorspastday');
  var VisitorsPastWeek = $(this).find(':selected').data('visitorspastweek');
    $('#dept-input').val(dept_number);
    $('#price-input').val(price);
    $("#totalVisitors").text(price);
   $("#totalVisitorsCurrentDay").text(VisitorsCurrentDay);
    $("#totalVisitorsPastDay").text(VisitorsPastDay);
    $("#totalVisitorsPastWeek").text(VisitorsPastWeek);
});
});

例如： - 页面加载时...如果总值（以橙色显示）大于黄色框中显示的总值，那么我想显示百分比通过除以它实现的价值。如果它是否定的..然后我想显示负号（ - ）和百分比

这是我想要实现的输出的屏幕截图。

请为任何解决方案编辑我的小提琴

Answer 1

检查一下。更改值 http://jsfiddle.net/d9f8t9vj/13/您将看到％

var percent = (100 - (VisitorsPastDay * 100) / VisitorsCurrentDay);

Answer 2

尝试：

  $("#totalVisitorsCurrentDay").text(totalVisCurrDay);
    $("#totalVisitorsPastDay").text(totalVisPasDay+" / "+(100-(totalVisPasDay*100/totalVisCurrDay)).toFixed(2)+"%");
    $("#totalVisitorsPastWeek").text(totalVisPasWeek+" / "+(100-(totalVisPasWeek*100/totalVisCurrDay)).toFixed(2)+"%");

JS：http://jsfiddle.net/as9k7uda/

显示+或 - 显示总数的百分比值

2 个答案: