Question

我需要将字符“％”添加到应用计数器脚本的编号。添加角色时，计数器静止不动。非常感谢您的帮助。我尝试在代码末尾添加一个函数，它没有帮助

<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

Answer 1

试试这个。

<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>

Answer 2

您可以使用 CSS 或 JQuery

来实现

使用JQuery

您需要遍历每个span[data-toggle="counter-up"]元素并替换其值，否则您将只获得第一个元素值

试试这个

＆＃13;

$(function(){
    addPercentage();
 });

 function addPercentage(){
    $('span[data-toggle="counter-up"]').each(function(elem){
        $(this).html($(this).html() + " %");
    });
 }

＆＃13;

<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>

＆＃13;

使用CSS

您可以使用伪类::after和content属性直接通过css执行此操作。无需添加jquery或js

＆＃13;

span[data-toggle="counter-up"]::after {
  content: " %";
}

＆＃13;

<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>

＆＃13;

添加字符“％”以进行反击

2 个答案: