Question

我正在使用模仿API，并以此来动态设置CSS动画，API 可以正常工作，但是无法设置其值，即我已将该API响应存储在变量中，并将其传递给jquery每个函数，但它不起作用并抛出此错误t.apply is not a function。我无法理解我在这里做错了什么

有人可以帮忙吗??。

       var BASE_URL = 'https://demo8806967.mockable.io/alphaindustries/reviews';

                 fetch(BASE_URL)
                 .then(function(response){
                    return response.json();
                    console.log('response in review>>',response.json());
                 })
                 .then(function(data){
                    console.log('data>>',data);
                    var productReview = data.MLA21019P1,
                    customQuestionsObject  = data.MLA21019P1.customQuestions;
                    $(".track").each(productReview,function(key,value) {
                        console.log('key and value',{
                            key:key,
                            value:value
                        })
                        var $el = $(this),
                            $bar = $el.find(".bar"),
                            leftPercent = $bar.attr("data-leftPercent");
        
                        $bar.css({ left: 0 }).animate({
                            left: value
                        }, 1500);
                    });
                 })
                .catch(function(err){
                     console.log('error>>>>',err);
                 })

<div class = 'inner'>
    <hr>
    <div id="PDP_ProductReviews" class="product-reviews">
    <header class="inline col-md-offset-1">
        <h1>Reviews</h1>
        <p>
            <span>Ratings based on 32 user reviews.</span>
            <a class="action-addReview" href="#">Add your Review</a>
        </p>
    </header>

    <div class="row tc-mt-3">
        <div class="review-item col-md-5 col-md-offset-1">
            <h3>Size <span class="active">True to Size</span></h3>

            
<div class="ui-range">
    <div class="track">
        <div class="bar" style="left: 45%"></div>
    </div>
    <span class="left">Runs Small</span>
    <span class="right">Runs Large</span>
</div>        </div>
        <div class="review-item col-md-5">
            <h3>Comfort <span class="active">Very Comfortable</span></h3>

            
<div class="ui-range">
    <div class="track">
        <div class="bar" style="left: 80%"></div>
    </div>
    <span class="left">Uncomfortable</span>
    <span class="right">Very Comfortable</span>
</div>        </div>
    </div>
    <div class="row tc-mt-5">
        <div class="review-item col-md-5 col-md-offset-1">
            <h3>Fit <span class="active">Slightly Loose</span></h3>

            
<div class="ui-range">
    <div class="track">
        <div class="bar" style="left: 60%"></div>
    </div>
    <span class="left">Runs Tight</span>
    <span class="right">Runs Loose</span>
</div>        </div>
        <div class="review-item col-md-5">
            <h3>Durability <span class="active">Very Durable</span></h3>

            
<div class="ui-range">
    <div class="track">
        <div class="bar" style="left: 65%"></div>
    </div>
    <span class="left">Non-Durable</span>
    <span class="right">Durable</span>
</div>        </div>
    </div>
</div>
</div>

Answer 1

您没有正确使用each方法。如果要遍历对象key/value对，则应通过$.each(...)而不是$(".track").each(...)进行调用。

如果我正确理解您要实现的目标，请尝试以下操作：

$.each(productReview, function(key,value) {
    var $el = $(".track"),
        $bar = $el.find(".bar"),
        leftPercent = $bar.attr("data-leftPercent");

    $bar.css({ left: 0 }).animate({
        left: value
    }, 1500);
});

TypeError t.apply不是函数

1 个答案: