jquery - 只有一个 div 使用 AJAX、jQuery 和 Circliful jQuery 插件填充
问题描述
我正在使用 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 部分。任何想法都会很棒
解决方案
我认为这是班级或身份问题
使用 class="myStat" 代替 id="myStat" 并将 $('#myStat') 替换为 $('.myStat')
推荐阅读
- c++ - Qgraphics项目变慢
- delphi - 设计了一个电子邮件系统。给出一个不熟悉的异常
- snowflake-cloud-data-platform - 在 Snowflake SQL 中解析 JSON 数组键/值
- android - 查看某个 Fragment 时隐藏 AppBarLayout
- python - 如何更改 pygame 窗口顶部栏的颜色?
- node.js - Nodemon -e 不使用给定的扩展触发
- python - KivyMD 如何更改 MDToolbar 标题大小和字体?
- php - pdftk 未在 php 中执行
- r - 根据数据框的列命名多个图
- c# - 在 y 轴上移动播放器