Question

在Forumotion上使用PunBB的想法是使用Points系统用一串文本替换显示的点数。使用span类我首先在代码周围定义了一个类'honorpoints'，它显示了用户拥有的点数。

<span class="honorpoints"><!-- BEGIN profile_field -->{postrow.displayed.profile_field.CONTENT}<!-- END profile_field --></span>

在论坛上使用该代码时，它会在用户名旁边显示一个基于用户点数的数字。我尝试使用以下jQuery代码来替换数字。

$(".honorpoints").each(function(){
    var elm = $(this);
    var number = parseFloat(elm.text(), 10);
    if (number >= 1 && number <= 500) {
        state = "rank 1";
    } else if (number >= 500 && number < 3000) {
        state = "rank 2";
    }
    elm.text(state);
});

然而，这没有做任何事情，数字仍然存在。它应该用UserA替换UserA：234和UserB：571：排名1和UserB：排名2.但是当在jsFiddle上使用时以及仅使用数字而不是{postrow.displayed.profile_field.CONTENT}代码时，代码确实有效。感谢帮助！

Answer 1

以下一行尝试解析"UserA : 234"，这就是您收到错误的原因。 parseFloat(elm.text(), 10);

您必须修复if s，两者都匹配500

您可以使用以下代码修复它：

$(".honorpoints").each(function(){
    $(this).text(function(i, text) {
        return text.replace(/\d+$/, function(match) {
            if(match >= 1 && match <= 500) return "rank 1";
            else if(match > 500 && match < 3000) return "rank 2";
        });
    });
});

说明：

$：匹配字符串的结尾;
\d：仅匹配数字;
+：匹配匹配一次或多次，因此匹配0和5000000;

demo

参考：

Regexp：https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp
replace：https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace
.text()：http://api.jquery.com/text/

Answer 2

查看评论中提供的页面来源，我相信在文档完全加载之前调用了$('.honorpoints').each方法（99546.js）。除非我遗漏了某些内容，否则你需要将该方法包装在$(document).ready函数中，这样只有在DOM准备就绪后才会执行它：

$(document).ready(function() {
    $(".honorpoints").each(function(){
        var elm = $(this);
        var number = parseFloat(elm.text(), 10);
        var state = "";
        if (number >= 1 && number <= 500) {
            state = "rank 1";
        } else if (number >= 500 && number < 3000) {
            state = "rank 2";
        }
        elm.text(state);
    });
});

我还添加了state变量的声明，因为它是一个很好的做法（因为它目前在你的问题中，state变量实际上是window.state，因为它之前没有被声明）。

Jquery / PunBB用字符串替换数字

2 个答案: