Question

在我的一个网站www.makememodern.com上，有一个部分（我们做什么）显示的数字会快速增加，直到达到定义的数字。我希望将“％”与较大的橙色数字放在一起，但结果为“NAN”。

以下是我在与此部分相关的Shortcode.php文件中找到的内容：

function rocknrolla_milestone_box_shortcode( $atts, $content = null ){

    extract( shortcode_atts(array(
        "count" => '500',       
        "title" => ''
    ), $atts) );   

    $rnr_milestone_box = '<div class="milestone-counter" data-perc="'. $count .'">';
    $rnr_milestone_box .= '<span class="milestone-count highlight">'. $count .'</span>';
    $rnr_milestone_box .= '<h6 class="milestone-details">'. $title .'</h6>';
    $rnr_milestone_box .= '</div>';

    return $rnr_milestone_box;
}

我在scripts.js文件中发现这与我遇到问题的部分有关：

jQuery('.milestone-counter').appear(function() {
    jQuery('.milestone-counter').each(function(){
        dataperc = jQuery(this).attr('data-perc'),
        jQuery(this).find('.milestone-count').delay(6000).countTo({
        from: 0,
        to: dataperc,
        speed: 2000,
        refreshInterval: 100
    });

Answer 1

$rnr_milestone_box .= '<span class="milestone-count highlight"><span class="milestone-count-percent">'. $count .'</span>%</span>';
...
jQuery(this).find('.milestone-count-percent').delay(6000).countTo({

Answer 2

这是我能想到的最简单的黑客攻击，没有任何JS争吵。看看是否有效。

function rocknrolla_milestone_box_shortcode( $atts, $content = null ){

    extract( shortcode_atts(array(
        "count" => '500',       
        "title" => ''
    ), $atts) );   

    $rnr_milestone_box = '<div class="milestone-counter" data-perc="'. $count .'">';
     $rnr_milestone_box .='<span class="milestone-count highlight">'. $count .'</span>';
    $rnr_milestone_box .='<span class="highlight" style="font-family: \'Open Sans\', \'Times New Roman\', Times, serif;font-size: 80px;line-height: 1.2;padding: 0;margin-bottom: 20px;position: relative;font-weight:700;text-transform: uppercase;letter-spacing: -0.02em;">%</span>';
    $rnr_milestone_box .= '<h6 class="milestone-details">'. $title .'</h6>';
    $rnr_milestone_box .= '</div>';

    return $rnr_milestone_box;
}

向JS添加百分比符号时出现NAN错误

2 个答案: