javascript - jQuery 每 5 个工作小时重置一次颜色模式

Question

我在下面有一个基本脚本，它从 HTML 格式的字段(工作时间)中获取数字，然后匹配模式。如果特定工作时间达到 1 小时，HTML 文本(注释)的颜色会发生变化。

我的问题是如何使脚本变小，第二部分是如何重置颜色模式以每 5 小时循环一次。所以如果工作时间达到20小时，颜色图案应该圈了4圈。

感谢您的帮助!

        var str = $(".work-hours").text();
        var pattern = /[0-9]+/;
        var match = str.match(pattern);

        if (parseInt(match) == 0) {
            $('.notes').css('color','white');
        }
        if ((parseInt(match) >= 1) && (parseInt(match) < 2)) {
            $('.notes').css('color','green');
        }
        if ((parseInt(match) >= 2) && (parseInt(match) < 3)) {
            $('.notes').css('color','yellow');
        }
        if ((parseInt(match) >= 3) && (parseInt(match) < 4)) {
            $('.notes').css('color','orange');
        }
        if ((parseInt(match) >= 4) && (parseInt(match) < 5)) {
            $('.notes').css('color','pink');
        }
        if (parseInt(match) >= 5) {
            $('.notes').css('color','red');
        }

Answer 1

因为 parseInt 使它的值下降，你可以像这样简化代码

    var str = $(".work-hours").text();
    var pattern = /[0-9]+/;
    var match = str.match(pattern);
    
    var colors = ['white', 'green', 'yellow', 'orange', 'pink', 'red'];

    $('.notes').css('color', colors[parseInt(match)]);

如果您希望它在添加更多小时数时围绕颜色圈出，您还可以对匹配项执行一些逻辑以使其适合数组，或者为额外的小时数扩展数组的基本方法

    var str = $(".work-hours").text();
    var pattern = /[0-9]+/;
    var match = str.match(pattern);
    
    var colors = ['white', 'green', 'yellow', 'orange', 'pink', 'red'];
    var color = colors[parseInt(match)%colors.length];
    $('.notes').css('color', color);