Question

我做错了什么？我试图显示对应于class =“likes”

的初始值的条形图

这是小提琴 http://jsfiddle.net/sghoush1/VU3LP/40/

Jquery看起来像这样

var baractive = $('<div class="barActive"></div');
    baractive.appendTo('.bar');

    function checkNumber() {
        var valueCurrent = parseInt($(".likes").text());

        if(isNaN(valueCurrent) || valueCurrent <= 20) {
            $(".barActive").css('height', '20px').css('width', '30px').css('background', 'green');
        }
        if(isNaN(valueCurrent) || valueCurrent <= 60) {
            $(".barActive").css('height', '20px').css('width', '80px').css('background', 'green');
        }
    }
    checkNumber();

Answer 1

您需要checkNumber()函数中的循环，以便它检查每个.likes元素的值并更新相应的条。

function checkNumber() {
    $(".likes").each(function () {
        var valueCurrent = parseInt($(this).text());

        if (isNaN(valueCurrent) || valueCurrent <= 20) {
            $(this).prev(".bar").children(".barActive").css('height', '20px').css('width', '30px').css('background', 'green');
        } else if (isNaN(valueCurrent) || valueCurrent <= 60) {
            $(this).prev(".bar").children(".barActive").css('height', '20px').css('width', '80px').css('background', 'green');
        }
    });
}

FIDDLE

Answer 2

目前，var valueCurrent = parseInt($(".likes").text());解析所有类似的文本，结果为2010402060，这可能不是您想要的。

我会这样改变checkNumber函数：

function checkNumber() {
    var bars = $(".bar"),
        likes = $(".likes");

    likes.each(function (index, like) {
        var value = parseInt($(like).text(), 10),
            bar = bars.eq(index).find(".barActive");

        if (value <= 60) bar.css("width", 80);
        if (value <= 20) bar.css("width", 30);
    });
}

...并将barActive样式移动到CSS中。 Working example at jsFiddle.

显示与初始值对应的条形图

2 个答案: