0

希望我能正确解释这一点。我在页面内的内容块上有一些 XML（由自定义 CMS 调用）。我需要获取一个字段的值，即数字价格（999.99 美元），然后我需要将其显示为图像，而不是像那样直接显示价格。

主要问题是我不能嵌入任何字体，而且价格的样式需要准确，所以我留下了一个 0-9 的图像精灵，然后创建空 div 等待他们的额外类，这将添加号码的背景图片。

我不那么激动:)

那么是否可以分解数字字符串（我知道我可以去掉 $ 和 .），然后循环将类添加到一组 div（会说 div 的 ID 都是“price”）？我可以在 PHP 中很快解决这个问题，但仅限于 JavaScript、HTML 和 CSS，我不得不跳出框框思考。也只能使用 jQuery 版本 1.7.2。

价格可能有 3-5 位数字，所以我想我会有 5 个设置的 div，然后如果价格中只有 3 位数字，则添加一个“隐藏”类。

想法/想法/建议？

在思考了一些评论后，我认为默认添加隐藏类可能更容易，然后将其删除并为每个数字添加附加类。

4

2 回答 2

0

我认为这就是您正在寻找的（根据您的评论）：http: //jsfiddle.net/Jhmxc/3/

$(".price").each( function() {
    var val = $(this).text() 
    $(this).empty();
    for( var i = 0; i < val.length; i++ ) {
        if(/^\d+$/.test(val[i])) {
            $numDiv = $("<div></div>").addClass("num"+val[i]);
            $(this).append($numDiv);
        }
        else {
            $(this).append($("<div>"+val[i]+"</div>").addClass("char"));
        }
    }
});

我只添加了 1-3 的课程......而这些课程只添加了颜色，但你可以看到我要去哪里。

编辑：

关于您在下面的评论...这样做吗？http://jsfiddle.net/Jhmxc/4/

    var val = "$231.2";
    var $output = $("<div></div>");
    for( var i = 0; i < val.length; i++ ) {
        if(/^\d+$/.test(val[i])) {
            $numDiv = $("<div></div>").addClass("num"+val[i]);
            $output.append($numDiv);
        }
        else {
            $output.append($("<div>"+val[i]+"</div>").addClass("char"));
        }
    }
    $("#price").append($output);

或在一个函数中：http: //jsfiddle.net/Jhmxc/5/

于 2013-04-30T19:27:46.823 回答
0

在 JavaScript 中，字符串是一个数组，因此您可以像这样遍历字符：

var priceString = "$999.99";
for( var index in priceString){
    var c = priceString[index];
    //process the character here
}

编辑 感谢评论者......这是一种更跨浏览器兼容的方式来遍历字符串中的字符：

var priceString = "$999.99";
for( var index = 0; index < priceString.length; index++ ) {
    var c = priceString.charAt(index);
    //process the character here
}
于 2013-04-30T18:20:57.453 回答