将类添加到动态 JSON 值

编程问答 2022-05-25

问题描述

我有一个不同行业的不同职业的动态用户列表，根据他们的行业（健康、教育、建筑、科学等），我想添加一个根据行业动态显示的颜色徽章用户在，以便快速区分用户一目了然。该代码在硬编码 html 环境中定位文本值时运行良好，但在尝试引用从动态 JSON 加载的文本值时似乎崩溃了。

我已经包含了下面的代码。

任何帮助将不胜感激！

谢谢， 史蒂夫。

//THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
var userJSON = 'https://mighty-oasis-08666.herokuapp.com/users'

//THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
$.getJSON(userJSON,function (populateUsers) {

    //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL CARD
    var userCard = populateUsers.reduce((acc,{id,name,username,email,phone,company,industry}) =>
            acc += `
            <div class='col col-4 align-items-stretch strain-container'>
                <div id="${id}" class="card user-card">
                    <div class="card-body">
                        <h2 class="title">${name}</h2>
                        <h6 class="title">${username}</h6>
                        <h6 class="title">${email}</h6>
                        <h6 class="title">${phone}</h6>
                        <h6 class="title">${company}</h6>
                        <h6 class="industry-type title">${industry}</h6>
                    </div>
                </div>
            </div>`,``);
    $('#user-grid').append(userCard)
});

//THIS IS THE CODE TO TARGET INDUSTRY TYPE CLASS
var $industryType = $('.industry-type');

//THIS IS THE CODE TO ADD INDUSTRY BADGE BASED ON INDUSTRY TYPE TEXT VALUE
$industryType.each(function() {
    var $this = jQuery(this);
    if ($this.text().trim() == 'Health') {
        $this.addClass('health-badge');
    } else if ($this.text().trim() == 'Education') {
        $this.addClass('education-badge');
    } else if ($this.text().trim() == 'Construction') {
        $this.addClass('construction-badge');
    } else if ($this.text().trim() == 'Science') {
        $this.addClass('science-badge');
    }
});
.health-badge {
    background-color: purple;
    color: green;
    height: 80px;
    width: 80px;
}
.science-badge {
    background-color: black;
    color: yellow;
    height: 80px;
    width: 80px;
}
.construction-badge {
    background-color: blue;
    color: white;
    height: 80px;
    width: 80px;
}
.education-badge {
    background-color: orangered;
    color: black;
    height: 80px;
    width: 80px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    
<body>

<!-- USER GRID -->
<div id="user-grid" class="row container fluid-container"></div>   

</body>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

jqueryjsonjson-valuetemplate-literals