javascript - 用于获取文本并相应更改 div 样式的 Jquery 函数
问题描述
我正在尝试获取 div 中的数字(由服务器生成)并相应地对 div 进行更改(所以基本上如果数字> = 4,进度条将是绿色的,标题为'superb',如果> = 3 <4,橙色标题为“好”等的进度条。)。
js:
var scores = $("div.progress-bar");
function progressbar_function(){
if (parseInt($(this).text()) >= 4){
$(this).addClass("bg-success");
$(this).text('Superb');
} else if(parseInt($(this).text()) >= 3) {
$(this).addClass("bg-warning");
$(this).text('Good');
}
};
$.each(scores, function(index, item) {
$(item).change(progressbar_function);
});
html
<ul class="list-group festival-list">
<li class="list-group-item">
<span class="float-left"><span class="ec ec-banana"></span> Vegan friendly:</span>
<div class="progress float-right" style="width: 50%; height: 22px;">
<div class="progress-bar" role="progressbar" style="width: {% widthratio vegan_friendly_avg 5 100 %}%" aria-valuenow="{{vegan_friendly_avg|default_if_none:"No reviews yet"}}" aria-valuemin="0" aria-valuemax="5">{{vegan_friendly_avg|floatformat:2|default_if_none:"No reviews yet"}}</div>
</div>
</li>
<li class="list-group-item">
<span class="float-left"><span class="ec ec-coffee"></span> Coffea quality:</span>
<div class="progress float-right" style="width: 50%; height: 22px;">
<div class="progress-bar" role="progressbar" style="width: {% widthratio coffea_quality_avg 5 100 %}%" aria-valuenow="{{coffea_quality_avg|default_if_none:"No reviews yet"}}" aria-valuemin="0" aria-valuemax="5">{{coffea_quality_avg|floatformat:2|default_if_none:"No reviews yet"}}</div>
</div>
</li>
.
.
.
</ul>
它不起作用,我做错了什么?:(
解决方案
试试这个
$(function () {
$("div.progress-bar").each(function () {
if (parseInt($(this).text()) >= 4) {
$(this).addClass("bg-success");
$(this).text('Superb');
} else if (parseInt($(this).text()) >= 4) {
$(this).addClass("bg-warning");
$(this).text('Good');
}
});
});
推荐阅读
- c - 不同设备的相同设备节点:更改一个节点的值会影响另一个节点 - 如何解决?
- go - 使用 golang 嵌套结构(带接口)
- javascript - react-hook-form:在选择元素中使用 readyOnly
- php - 在Firefox中添加右键单击地址栏的菜单项:它是如何在php中编程以及如何在本地模拟它?
- json - Talend 以一种奇怪的格式提取 JSON
- python - pandas dataframe - 通过 REST API 添加到 woocommerce
- symfony - 如何在 Symfony 中将 CacheInterface 与 Paginator 一起使用?
- vlang - 我将如何在 Vlang 中创建静态库?
- python-3.x - 使用元素树将 xml 字节转换为字符串
- java - 绑定application.properties文件时如何强制强制字符串?