0

我究竟做错了什么？我正在尝试显示与 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();
4

2 回答 2

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');
        }
    });
}

小提琴

于 2013-04-14T04:32:00.293 回答
0

目前，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 中。jsFiddle 的工作示例。

于 2013-04-14T04:37:43.357 回答