jQuery函数获取文本并相应地更改div样式

时间:2018-11-14 17:53:01

标签: javascript jquery bootstrap-4

我正在尝试获取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>

它不起作用,我在做什么错? :(

2 个答案:

答案 0 :(得分:1)

尝试

CurrentDb.Execute "UPDATE [Table Name] SET Note = 'aaaa' WHERE [Codice Progetto] = 'XX';"

https://jsfiddle.net/x1yhctad/3/

答案 1 :(得分:0)

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));
});

此代码应该起作用。您的代码的问题在于,没有div的have change事件不会触发任何change事件,因此应在加载脚本时初始化progressbar样式。