HTML dosyasında belirli bir noktaya ulaştığınızda Sayı ve Metin Anlama

Question

HTML dosyamda aşağı doğru ilerlerken sayıları metin ile saymak ve belirli bir bölüme ulaşmak istiyorum. Kod şöyle görünür:

<h3 class="count">25 Years</h3> 
<p>On the Road...</p> 

<h3 class="count">143 Million</h3> 
<p>Transactions worldwide 2015</p> 

$('.count').each(function() { 
    $(this).prop('Counter', 0).animate({ 
     Counter: $(this).text() 
    }, { 
     duration: 4000, 
     easing: 'swing', 
     step: function (now) { 
      $(this).text(Math.ceil(now)); 
     } 
    }); 
}); 

sorun sadece bir dizi koyduğunuzda Yalnızca bir doğru sonucu elde ediyoruz. 25 Years gibi bir dize koyarsam, NaN çıktılar.

Kodum için önerileriniz var mı?

var targetOffset = $(".company-numbers").offset().top; 

     var $w = $(window).scroll(function(){ 
      if ($w.scrollTop() > targetOffset) { 
       (function() { 
        $('.count').each(function() { 
         $(this).prop('Counter',0).animate({ 
          Counter: $(this).text() 
         }, { 
          duration: 4000, 
          easing: 'swing', 
          step: function (now) { 
           $(this).text(Math.ceil(now)); 
           return false; 
          } 
         }); 
        }); 
       })(); 
      } else { 
       return false; 
      } 
     }) 

Answer 1

Sorun, jQuery kodunuzun değerin bir tamsayıya ayrıştırılabilmesini beklemesidir. Kendi öğelerinde sayılacak değerleri, örneğin <span> gibi belirtmeyi deneyin ve sonra bu değerler üzerinde jQuery mantığını çağırın.

<h3><span class="count">25</span> Years</h3> 
<p>On the Road...</p> 

<h3><span class="count">143</span> Million</h3> 
<p>Transactions worldwide 2015</p> 

Answer 2

İşlevinizin içinde bir anahtar dizisi içeren bir dizi oluşturmak veya bir JSON gibi çalışmak istiyorsanız, öğelere sayı değerleri atamanız gerekir.

Answer 3

Lütfen bu kodu kontrol edin, gerçekten böyle olmasını ister misiniz? ve bana haber ver!

<h3 class="count">25 Years</h3> 
<p>On the Road...</p> 

<h3 class="count">143 Million</h3> 
<p>Transactions worldwide 2015</p> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
    $('.count').each(function() { 
       $(this).prop('Counter',0).animate({ 
        Counter: $(this).text().match(/\d/g).length 
       }, { 
        duration: 4000, 
        easing: 'swing', 
        step: function (now) { 
         $(this).text(Math.ceil(now)); 
        } 
       }); 
      }); 
      </script> 

veya toplam karakter sayısını saymak istiyorsanız o zaman "sayaç" özelliğini değiştirin.

Counter: $(this).html().length