jquery - 只有一个 div 使用 AJAX、jQuery 和 Circliful jQuery 插件填充

Question

我正在使用 circliful jQuery 插件，我想用 JSON 数据填充它。第一个 div 加载数据，而其余的根本不加载任何内容。

我尝试了多种方法，但似乎对我没有任何作用，它们要么都填充了 0%，什么都没有，或者只是上面提到的第一个 div。

    <div class="grid">
             <!-- ajax content loaded into this div -->
    </div>

                     <!--json file format-->
[
 {
   "id": 1,
   "full_name": "Ignacius Antos",
   "email": "iantos0@jigsy.com",
   "password": "FK4umZJ9eh",
   "profile_picture": "https://i.pravatar.cc/255?img=5",
   "list_of_items_bought": "", 
   "rating": "25",
   "time_spent": "15"
 }, 
 {
   "id": 2,
   "full_name": "Anallise Ousley",
   "email": "aousley1@yellowbook.com",
   "password": "5fLR4WhC",
   "profile_picture": "https://i.pravatar.cc/255?img=56",
   "list_of_items_bought": "",
   "rating": "30",
   "time_spent": "30"
 },

         <!--script that loads data from json file-->

<script>
$(document).ready(function() {
    $.ajax({
        type: "Get",
        dataType: "json",
        url: "users.json",
        success: function(data) {
        var profile_data = '';
            $.each(data, function(key, value){
                profile_data += '<div class="user">';
                profile_data += '<a href="#"><img src='+value.profile_picture+'></img></a>';
                profile_data += '<h3>'+value.full_name+'</h3>';
                profile_data += '</div>';
                profile_data += '<div class="grid-item grid-item--width3 grid-item--height3" id="myStat" data-animation="1" data-animationStep="3" data-percent="' + value.rating + '"></div>'; <!-- this is where the json is called ->>
            });
        $('.grid').append(profile_data);
        }
    });

<< this is the script that loads the jQuery plug in but only shows for one div and not the rest of the others >>

$( document ).ready(function(data) {
        $("#myStat").circliful({
        }); 
    });
});      
</script> 

我认为我弄错的部分是我不确定的函数的#myStat 部分。任何想法都会很棒

Answer 1

我认为是class或者id的问题

使用 class="myStat"而不是 id="myStat" 并将 $('#myStat') 替换为 $('.myStat')