为什么我的百分比符号没有与整数值一起输出？

Question

HTML 代码<span class="odometer" data-count-to="100"></span>输出 100。我希望它计数并显示百分号。例如 100%。我该怎么做？

我尝试使用%来表示%符号，但它不起作用。 <span class="odometer" data-count-to="100">&#37;</span>

输出的所有内容均为 100，末尾没有百分号。

  /* Countdown Activation */
        countdownActivation: function () {
            $('.tm-countdown').each(function () {
                var $this = $(this),
                    finalDate = $(this).data('countdown');
                $this.countdown(finalDate, function (event) {
                    $this.html(event.strftime(
                        '<div class="tm-countdown-pack tm-countdown-day"><h2 class="tm-countdown-count">%-D</h2><h5>Days</h5></div><div class="tm-countdown-pack tm-countdown-hour"><h2 class="tm-countdown-count">%-H</h2><h5>Hour</h5></div><div class="tm-countdown-pack tm-countdown-minutes"><h2 class="tm-countdown-count">%M</h2><h5>Min</h5></div><div class="tm-countdown-pack tm-countdown-seconds"><h2 class="tm-countdown-count">%S</h2><h5>Sec</h5></div>'));
                });
            });
        },
        /* CounterUp Activation */
        counterupActivation: function () {
            if ($('.odometer').length) {
                $(window).on('scroll', function () {
                    function winScrollPosition() {
                        var scrollPos = $(window).scrollTop(),
                            winHeight = $(window).height();
                        var scrollPosition = Math.round(scrollPos + (winHeight / 1.2));
                        return scrollPosition;
                    }
                    var elemOffset = $('.odometer').offset().top;
                    if (elemOffset < winScrollPosition()) {
                        $('.odometer').each(function () {
                            $(this).html($(this).data('count-to'));
                        });
                    }
                });
            }
        },
        /* Wowjs Activation */
        wowJsActive: function () {
            var wow = new WOW({
                boxClass: 'wow',
                animateClass: 'animated',
                offset: 0,
                mobile: true,
                live: true
            });
            wow.init();
        },

<span class="odometer" data-count-to="100">&#37;</span>

Answer 1

因为在counterupActivation方法中，您有以下行：

$('.odometer').each(function () {
    $(this).html($(this).data('count-to'));
});

请注意以下行：

$(this).html($(this).data('count-to'));

此行的作用是它将用新值替换 HTML 中的所有内容。这意味着，您的%被覆盖。

您需要做的是从HTML中删除%，并将其附加到上面的行中：

$('.odometer').each(function () {
    $(this).html($(this).data('count-to') + '%');
});