将 类 添加到动态 JSON 值
Adding Classes to Dynamic JSON Values
我有一个动态用户列表,其中包含各种行业的各种职业,具体取决于他们的行业(健康、教育、建筑、科学等),我想添加一个颜色徽章,根据不同行业动态显示用户所在行业,快速区分用户一目了然。该代码在硬编码 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>
添加新元素时添加class。
您可以使用一个对象来保存行业名称和相应徽章 classes 之间的映射,因此您不需要所有这些 if
语句并且可以将其用于静态和动态代码。
const industry_class = {
"Health": "health-badge",
"Education": "education-badge",
"Construction": "construction-badge",
"Science": "science-badge"
};
//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.map(({id, name, username, email, phone, company, industry}) => {
let cls = industry_class[industry.trim()] || "";
return `
<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 ${cls}">${industry}</h6>
</div>
</div>
</div>`;
}).join("");
$('#user-grid').append(userCard)
});
var $industryType = $('.industry-type');
$industryType.each(function() {
var $this = jQuery(this);
let industry = $this.text().trim();
if (industry in industry_class) {
$this.addClass(industry_class[industry]);
}
});
.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>
我有一个动态用户列表,其中包含各种行业的各种职业,具体取决于他们的行业(健康、教育、建筑、科学等),我想添加一个颜色徽章,根据不同行业动态显示用户所在行业,快速区分用户一目了然。该代码在硬编码 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>
添加新元素时添加class。
您可以使用一个对象来保存行业名称和相应徽章 classes 之间的映射,因此您不需要所有这些 if
语句并且可以将其用于静态和动态代码。
const industry_class = {
"Health": "health-badge",
"Education": "education-badge",
"Construction": "construction-badge",
"Science": "science-badge"
};
//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.map(({id, name, username, email, phone, company, industry}) => {
let cls = industry_class[industry.trim()] || "";
return `
<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 ${cls}">${industry}</h6>
</div>
</div>
</div>`;
}).join("");
$('#user-grid').append(userCard)
});
var $industryType = $('.industry-type');
$industryType.each(function() {
var $this = jQuery(this);
let industry = $this.text().trim();
if (industry in industry_class) {
$this.addClass(industry_class[industry]);
}
});
.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>