Добавление различных суффиксов к счетчикам чисел - PullRequest
Новая
       1

Добавление различных суффиксов к счетчикам чисел

1 голос
/ 26 января 2020

Я показываю количество статистики на странице. Цифры анимируются при прокрутке страницы вниз.

Некоторые характеристики требуют «+» или «%» после числа. Кажется, я могу применить только один и тот же символ ко всем счетчикам, но нужно указать целевые значения c со знаком "+", "%" или вообще без символов. Поэтому мой вопрос заключается в том, как выбрать целевой счетчик c с указанным суффиксом c?

Ниже приведен код, который я использовал для четырех счетчиков без суффикса. Могу ли я просто добавить дополнительный код к этому? Я довольно новичок в программировании, поэтому любая помощь будет высоко ценится! 

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var a = 0;
$(window).scroll(function() {

var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum).toLocaleString("en-US"));
},
complete: function() {
$this.text(this.countNum.toLocaleString("en-US"));
}
});
});
a = 1;
}
});
</script>
<div id="counter">
    <div class="sqs-col sqs-col-3 counter-value-1 counter-value" data-count="30000" data-desc="countries surveyed in">0</div>
    <div class="sqs-col sqs-col-3 counter-value-2 counter-value" data-count="135" data-desc="countries surveyed in">0</div>
    <div class="sqs-col sqs-col-3 counter-value-3 counter-value" data-count="18" data-desc="countries surveyed in">0</div>
    <div class="sqs-col sqs-col-3 counter-value-4 counter-value" data-count="100" data-desc="countries surveyed in">0</div>
</div>
<style>     
 .counter-value-1 { 
   font-family: Georgia;
   font-size: 60px;
   color: #A42B28;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-1:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
   .counter-value-2 { 
   font-family: Georgia;
   font-size: 60px;
   color: #EA7326;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-2:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
  .counter-value-3 { 
   font-family: Georgia;
   font-size: 60px;
   color: #24B24B;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-3:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
   .counter-value-4 { 
   font-family: Georgia;
   font-size: 60px;
   color: #A9CF39;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-4:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
</style>

Ответы [ 2 ]

0 голосов
/ 26 января 2020

Как насчет того, чтобы связать персонажа как атрибут, так же, как вы связали количество и описание? 

var a = 0;
$(window).scroll(function() {

var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text((Math.floor(this.countNum).toLocaleString("en-US")) + $this.attr('data-character'));
},
complete: function() {
$this.text((this.countNum.toLocaleString("en-US")) + $this.attr('data-character'));
}
});
});
a = 1;
}
});
 .counter-value-1 { 
   font-family: Georgia;
   font-size: 60px;
   color: #A42B28;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-1:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
   .counter-value-2 { 
   font-family: Georgia;
   font-size: 60px;
   color: #EA7326;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-2:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
  .counter-value-3 { 
   font-family: Georgia;
   font-size: 60px;
   color: #24B24B;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-3:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
   .counter-value-4 { 
   font-family: Georgia;
   font-size: 60px;
   color: #A9CF39;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-4:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<div id="counter">
    <div class="sqs-col sqs-col-3 counter-value-1 counter-value" data-character="+" data-count="30000" data-desc="countries surveyed in">0</div>
    <div class="sqs-col sqs-col-3 counter-value-2 counter-value" data-character="%" data-count="135" data-desc="countries surveyed in">0</div>
    <div class="sqs-col sqs-col-3 counter-value-3 counter-value" data-character="-" data-count="18" data-desc="countries surveyed in">0</div>
    <div class="sqs-col sqs-col-3 counter-value-4 counter-value" data-character="*" data-count="100" data-desc="countries surveyed in">0</div>
</div>
0 голосов
/ 26 января 2020

Я установил дополнительное поле данных data-suffix для двух последних элементов, поэтому я могу найти этот суффикс при циклическом просмотре элементов и использовать его также: 

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var a = 0;
$(window).scroll(function() {

var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
   $('.counter-value').each(function() {
   var $this = $(this),
   countTo = $this.attr('data-count');
   $({
   countNum: $this.text()
   }).animate({
   countNum: countTo
   },
   {
   duration: 2000,
   easing: 'swing',
   step: function() {
   var suffix=$this.data("suffix");
   $this.text(Math.floor(this.countNum).toLocaleString("en-US") +suffix);
   },
   complete: function() {
   var suffix=$this.data("suffix");
   $this.text(this.countNum.toLocaleString("en-US") + suffix);
   }
});
});
a = 1;
}
});
</script>
<div id="counter">
    <div class="sqs-col sqs-col-3 counter-value-1 counter-value" data-count="30000" data-desc="countries surveyed in">0</div>
    <div class="sqs-col sqs-col-3 counter-value-2 counter-value" data-count="135" data-desc="countries surveyed in">0</div>
    <div class="sqs-col sqs-col-3 counter-value-3 counter-value" data-count="18" data-desc="countries surveyed in" data-suffix="%">0</div>
    <div class="sqs-col sqs-col-3 counter-value-4 counter-value" data-count="100" data-desc="countries surveyed in" data-suffix="%">0</div>
</div>
<style>     
 .counter-value-1 { 
   font-family: Georgia;
   font-size: 60px;
   color: #A42B28;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-1:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
   .counter-value-2 { 
   font-family: Georgia;
   font-size: 60px;
   color: #EA7326;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-2:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
  .counter-value-3 { 
   font-family: Georgia;
   font-size: 60px;
   color: #24B24B;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-3:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
   .counter-value-4 { 
   font-family: Georgia;
   font-size: 60px;
   color: #A9CF39;
   line-height: 1.5em;
   text-align: center;
   padding: 17px 0;
 }
  .counter-value-4:after {
   content: attr(data-desc);
    display: block;
    text-transform: none;
    font-family: Poppins;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
  }
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...