Question

我有以下类型的HTML代码：

<div class="note">
<h4>
<span>3</span>
</h4>
</div>

<div class="note">
<h4>
<span>1</span>
</h4>
</div>

我正在使用JS来根据值设置范围文本的样式：

jQuery(function () {
// Score Color
var score = parseInt(jQuery('.note h4 span').text().trim());
var color = 'red';
if (!isNaN(score)) {
    if (score >= 3) {
        color = 'orange';
    }
    if (score >= 4) {
        color = 'green';
    }
    jQuery('.note h4 span').css('color', color);
}
});

当我只有一个＆＃34;注意＆＃34;它很有效。类。然而，有几个＆＃34;注意＆＃34;它不起作用。解决这个问题的最佳方法是什么？

由于

Answer 1

您必须使用该类迭代所有项目：

jQuery(function () {
    // Score Color
    $('.note h4 span').each(function () {
        var score = parseInt($(this).text().trim());

        var color = 'red';
        if (!isNaN(score)) {
            if (score >= 3) {
                color = 'orange';
            }
            if (score >= 4) {
                color = 'green';
            }
        }
        //Just put this outside the if.
        //And use keyword this
        jQuery(this).css('color', color);
    });    
});

.each()迭代对象上的所有项目。

$('.note h4 span')返回与该选择器对应的项目列表。如果我的解释中的任何内容不正确，请告诉我，我也是JQuery的新手。

Answer 2

1）以下行将返回“31”，我想这不是你所期望的：

var score = parseInt(jQuery('.note h4 span').text().trim());

2）以下行将影响“h4”中带有“note”类的“span”的所有DOM元素，我想这不是您所期望的：

 jQuery('.note h4 span').css('color', color);

你必须迭代一个带有所有spans元素的对象，以便用jquery“each”循环改变每个对象的颜色。

检查以下JsFiddle：

https://jsfiddle.net/2ho83qeg/

根据值自定义颜色（几次）

2 个答案: