时间戳

首页 > 解决方案 > TypeError t.apply 不是函数

javascript - TypeError t.apply 不是函数

问题描述

我正在使用 mockapi 并动态设置 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>

标签： javascriptjqueryhtml

解决方案

您没有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);
});

推荐阅读