Jquery/PunBB将数字替换为字符串

Jquery/PunBB Replace Number with String

本文关键字：替换 字符串 数字 PunBB Jquery      更新时间：2024-05-28

在Forumotion上使用PunBB的想法是使用点数系统将显示的点数替换为字符串。使用span类，我首先在显示用户点数的代码周围定义了一个类"荣誉点数"。

<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:234和UserB:571替换为UserA:rank 1和UserB:rank 2。然而，当在jsFiddle上使用该代码时，以及当仅使用数字而不是{postrow.displayed.profile_field.CONTENT}代码时，该代码确实有效。感谢您的帮助！

查看您在评论中提供的页面的源代码，我相信您的$('.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，因为它以前没有声明）。

下面一行试图解析"UserA : 234"，这就是为什么会出现错误。parseFloat(elm.text(), 10);

你必须修复你的if，两者都匹配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

演示

参考：

  • Regexp:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp
  • replace:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replacement
  • .text():http://api.jquery.com/text/
相关文章：