Мне нужно добавить символ «%» к числу, к которому применяется скрипт счетчика. Когда вы добавляете персонажа, счетчик останавливается. Большое спасибо за Вашу помощь. Я пробовал добавить функцию в конец кода, не помогло
<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
Попробуй это.
<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>
счетчик стоит на месте.
Это приращения? если да, то добавьте скрипт в ответ
И что ты имеешь ввиду еще. Обновляются ли значения другими скриптами?
Большое спасибо за Вашу помощь. В скрипте учитываются только числа. Символ «%» считается строкой. Отправил плагин на доработку другому программисту.
Если это так, поместите логику в функцию и вызывайте ее всякий раз, когда происходит обновление.
Ответ обновлен. вызвать функцию addPercentage
после обновления значения
Очень жаль. Забыл добавить. Мне нужен только знак "%" для последнего значения.