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

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'));

这条线的作用是 replace everything in the HTML with a new value 。这意味着您的 % 正在被覆盖。

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

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