Show Bars Corresponding To The Initial Values

what am I doing wrong? I am trying to show bars corresponding to the initial values of the class='likes' Here is the fiddle http://jsfiddle.net/sghoush1/VU3LP/40/ The Jquery looks

Solution 1:

You need a loop in the checkNumber() function, so that it will check the value of each .likes element and update the corresponding bar.

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

Solution 2:

Currently, var valueCurrent = parseInt($(".likes").text()); parses text of all like combined, with result being 2010402060, which is probably not what you want.

I'd change checkNumber function this way:

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

...and move barActive styles into CSS. Working example at jsFiddle.