Javascript Jquery函数获取文本并相应地更改div样式
我正在尝试获取div中的编号(由服务器生成),并相应地对div进行更改(因此,基本上,如果编号>=4,则进度条将为绿色,标题为“超级”,如果>=3 这段代码应该可以工作。代码的问题是,在not div的have change事件上没有要触发的更改事件,您应该在加载脚本时初始化progressbar样式。试试这个Javascript Jquery函数获取文本并相应地更改div样式,javascript,jquery,bootstrap-4,Javascript,Jquery,Bootstrap 4,我正在尝试获取div中的编号(由服务器生成),并相应地对div进行更改(因此,基本上,如果编号>=4,则进度条将为绿色,标题为“超级”,如果>=3 这段代码应该可以工作。代码的问题是,在not div的have change事件上没有要触发的更改事件,您应该在加载脚本时初始化progressbar样式。试试这个 $(function () { $("div.progress-bar").each(function () { if (parseInt($(this).tex
$(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');
}
});
});
注意,如果两个if/else if条件在else块中都有相同的语句,则您有
>=4
。更改>=比较。else if(parseInt($(this).text())>=4)
如果仍然不起作用,请尝试在progressbar\u函数上绑定项,如下$(项)。更改(progressbar\u函数.bind(项))
Sry my bad当复制到这里时。第二个语句是>=3,仍然不起作用。
<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>
var scores = $("div.progress-bar");
function progressbar_function($item) {
if (parseInt($item.text()) >= 4) {
$item.addClass("bg-success");
$item.text('Superb');
} else if (parseInt($(this).text()) >= 3) {
$item.addClass("bg-warning");
$item.text('Good');
}
};
$.each(scores, function (index, item) {
progressbar_function($(item));
});
$(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');
}
});
});