Штрих-код барграфа в wordpress

Question

Итак, я пытаюсь создать штрих-код барграфа. Я хотел иметь возможность получить ширину из текста внутри li, но я не могу его получить, он не определен. Я не эксперт в jquery, поэтому простите меня.

Например:

jQuery(document).ready(function() { 
    jQuery(document).scroll(function() { 
     var top = jQuery(document).scrollTop(); 
     if (top > 10) 
     { 
      jQuery(".bar").animate({ width: '20%' }, 2000) 
     } 
    }); 
}); 

Хорошо, что анимируется штраф в предварительно установленной ширины. Затем я попытался изменить «20%» на переменную, которая вызывает функцию, которая теоретически должна получить текст внутри элемента li.

Например:

function name() { 
      jQuery('.bar').text()}; 
var barLength = name(); 

Хм, как бы я получить значение внутри элемента LI? Может быть, есть более простой способ? Кроме того, поскольку каждая длина бара должна быть разной, я бы использовал «каждый» цикл вправо? Как и для каждого .bar, получите значение и установите ширину как это, это будет нормально?

Answer 1

jQuery(document).ready(function() { 
    jQuery(document).scroll(function() { 
     function isScrolledIntoView(elem) { 
      var docViewTop = jQuery(window).scrollTop(); 
      var docViewBottom = docViewTop + jQuery(window).height(); 

      var elemTop = jQuery(elem).offset().top; 
      var elemBottom = elemTop + jQuery(elem).height(); 

      return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
     } 


     jQuery(window).scroll(function() { 
      if (isScrolledIntoView(jQuery('.bargraph'))) { 
       jQuery(".bar10").css({ "width": "10%" }) 
       jQuery(".bar20").css({ "width": "20%" }) 
       jQuery(".bar30").css({ "width": "30%" }) 
       jQuery(".bar40").css({ "width": "40%" }) 
       jQuery(".bar50").css({ "width": "50%" }) 
       jQuery(".bar60").css({ "width": "60%" }) 
       jQuery(".bar70").css({ "width": "70%" }) 
       jQuery(".bar80").css({ "width": "80%" }) 
       jQuery(".bar90").css({ "width": "90%" }) 
       jQuery(".bar100").css({ "width": "100%" }) 
      } 

     }); 
    }); 
});