繁体   English   中英

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

Jquery function to get text and change div style accordingly

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

尝试这个

$(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');
        }
    });
});

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

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样式。

1 从多个div获取文本并放在其他相应的div中

我有一个项目,我需要从多个容器中复制文本并添加其他容器。 具体来说,我在HTML页面上的一个地方有多个问答文本,我需要复制文本并将其放在页面上不同的相应位置。 我已经设置了一个codepen来更好地解释我需要的东西(使用4个问题演示但在项目中我有20个问题): https : //c ...

2 如何使用JSOUP从div样式获取文本

如何使用JSOUP获取文本“ xxxx”及其网址。 &lt;div style="width:45%;float:left;border: dashed 1px #966;margin:0 10px;padding:10px;height:400px;"&gt; &lt;ul&g ...

3 如何从div获取文本[html + jquery]

我正在出于自己的目的更改动画代码,无法从div获取文本以对其进行动画处理。 原始动画: https : //codepen.io/Lunoware/pen/gjYjBw 我的代码(我删除了输入,脚本的不正确部分和“ if”指令) 的CSS jQuery的 我需 ...

4 如何使用jQuery按名称从div获取文本?

我需要显示DIV名称中的内容作为sample 。 在我正在尝试的代码下面,但是它将返回空结果。 HTML代码: 脚本代码: 预期结果: sample =这是示例文本 谢谢大家! ...

5 使用jQuery从当前div获取文本

我有一个小型搜索引擎,在数据库中查询名称列表。 引擎最多返回5个名称。 每个人的姓名旁边都有一个按钮。 单击该按钮时,我的jQuery代码应该仅将该人的名字添加到逗号分隔的列表中。 当前,它将添加引擎提取的每个名称。 我假设我需要以某种方式利用this命令。 我感觉好像没有正确选择我 ...

7 从div获取文本并传递给函数

我正在尝试使用angular2在函数中传递div文本 我的模板中有这个 并在组件中 如果我放一些文本代替this.text它会记录下来,没有任何问题 我也尝试过this.value但它记录未定义 其他我尝试添加&lt;div #test (click)="log ...

2016-10-11 07:52:23 2 2606   angular
9 如何从div获取文本

这个问题已经在这里有了答案: 使用.text()仅检索未嵌套在子标记中的文本 23个答案 我的HTML代码: 我想将文本显示为“ 选择项目item1 ”(在这里,我只想从下拉列表中获得选定的项目文本以及div的内容)。 ...

10 从div获取文本

我正在尝试获取文本: 但它返回: 当我尝试不输入文字时: 它返回div ...没有错误... 我如何获得短信? $ 1000.00 谢谢! ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM