Добавьте символ "%" для противодействия

Мне нужно добавить символ «%» к числу, к которому применяется скрипт счетчика. Когда вы добавляете персонажа, счетчик останавливается. Большое спасибо за Вашу помощь. Я пробовал добавить функцию в конец кода, не помогло

<script type="text/javascript">
  $(function(){
    $('span[data-toggle="counter-up"]').html($('span[data-toggle="counter-up"]').html()+ ' %');
  });
</script>

Мой HTML

  <section id="facts"  class="wow fadeIn">
     <div class="container">
        <div class="row counters">
           <div class="col-lg-3 col-6 text-center">
              <span data-toggle="counter-up">1807</span>
              <p>Единиц техники под нашим сопровождением</p>
           </div>
           <div class="col-lg-3 col-6 text-center">
              <span data-toggle="counter-up">7342</span>
              <p>Пользовательскх обращений решено за 2017 год</p>
           </div>
           <div class="col-lg-3 col-6 text-center">
              <span data-toggle="counter-up">57</span>
              <p>Информационных систем реализовано</p>
           </div>
           <div class="col-lg-3 col-6 text-center">
              <span data-toggle="counter-up">94</span>
              <p>Уровень SLA по решению пользовательских обращений</p>
           </div>
        </div>
     </div>
  </section>

Я использую jquery.counterup.js 2.1.0

Очень жаль. Забыл добавить. Мне нужен только знак "%" для последнего значения.

chapaev_in_hole 11.04.2018 11:59
1
1
892
2

Ответы 2

Попробуй это.

<script type="text/javascript>
  $(function(){
    var el = $('span[data-toggle="counter-up"]');
    var text = el.text();
    // do something with the value
    // append ' %' to the value
    el.text(text + ' %');
  });
</script>

Вы можете сделать это с помощью CSS или JQuery

используя JQuery

Вам нужно перебрать каждый элемент span[data-toggle="counter-up"] и заменить его значение, иначе вы получите только первое значение элемента

Попробуй это

$(function(){
    addPercentage();
 });

 function addPercentage(){
    $('span[data-toggle="counter-up"]').each(function(elem){
        $(this).html($(this).html() + " %");
    });
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="facts"  class="wow fadeIn">
     <div class="container">
        <div class="row counters">
           <div class="col-lg-3 col-6 text-center">
              <span data-toggle="counter-up">1807</span>
              <p>Единиц техники под нашим сопровождением</p>
           </div>
           <div class="col-lg-3 col-6 text-center">
              <span data-toggle="counter-up">7342</span>
              <p>Пользовательскх обращений решено за 2017 год</p>
           </div>
           <div class="col-lg-3 col-6 text-center">
              <span data-toggle="counter-up">57</span>
              <p>Информационных систем реализовано</p>
           </div>
           <div class="col-lg-3 col-6 text-center">
              <span data-toggle="counter-up">94</span>
              <p>Уровень SLA по решению пользовательских обращений</p>
           </div>
        </div>
     </div>
  </section>

используя CSS

Вы можете сделать это напрямую с помощью css, используя псевдокласс ::after и свойство content. Не нужно добавлять jquery или js

span[data-toggle="counter-up"]::after {
  content: " %";
}
<section id="facts"  class="wow fadeIn">
     <div class="container">
        <div class="row counters">
           <div class="col-lg-3 col-6 text-center">
              <span data-toggle="counter-up">1807</span>
              <p>Единиц техники под нашим сопровождением</p>
           </div>
           <div class="col-lg-3 col-6 text-center">
              <span data-toggle="counter-up">7342</span>
              <p>Пользовательскх обращений решено за 2017 год</p>
           </div>
           <div class="col-lg-3 col-6 text-center">
              <span data-toggle="counter-up">57</span>
              <p>Информационных систем реализовано</p>
           </div>
           <div class="col-lg-3 col-6 text-center">
              <span data-toggle="counter-up">94</span>
              <p>Уровень SLA по решению пользовательских обращений</p>
           </div>
        </div>
     </div>
  </section>

счетчик стоит на месте.

chapaev_in_hole 11.04.2018 12:02

Это приращения? если да, то добавьте скрипт в ответ

Aneesh R S 11.04.2018 12:04

И что ты имеешь ввиду еще. Обновляются ли значения другими скриптами?

Aneesh R S 11.04.2018 12:05

Большое спасибо за Вашу помощь. В скрипте учитываются только числа. Символ «%» считается строкой. Отправил плагин на доработку другому программисту.

chapaev_in_hole 11.04.2018 12:10

Если это так, поместите логику в функцию и вызывайте ее всякий раз, когда происходит обновление.

Aneesh R S 11.04.2018 12:12

Ответ обновлен. вызвать функцию addPercentage после обновления значения

Aneesh R S 11.04.2018 12:14

Другие вопросы по теме