показать штрихи, соответствующие начальным значениям

Question

что я делаю неправильно? Я пытаюсь показать полосы, соответствующие начальным значениям класса = «любит»

Вот скрипку 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.