5

我正在使用 Opencart 电子商务网站，我需要自定义产品价格字体大小，例如： product price: $ 250.50我需要为$ = 16px; 250 = 22px; .50 = 14px;

如何为单个数量设置不同的字体大小..???

这是我的动态 php 代码，它在我的产品页面上显示价格文本：

<span class="price"><?php echo $product['price']; ?></span>

我的产品列表页面不是一个带有价格的产品，而是有很多带有价格列表的产品。

感谢您的帮助，如果有人在此之前问过同样的问题，请与我分享这些链接...

4

9 回答 9

7 
$.each($('.price'), function(){
var price = $(this).html();
$(this).html(price.replace(/(\D*)(\d*\.)(\d*)/,'<span style="font-size:16px;">$1</span><span style="font-size:22px;">$2</span><span style="font-size:14px;">$3</span>'));
});

http://jsfiddle.net/gr8x5/10/

于 2013-06-18T07:46:38.610 回答
3

这是一个快速而肮脏的例子：

<html>
<head>
    <style>
        .dollar_sign { font-size: 16px; }
        .dollars { font-size: 22px; }
        .cents { font-size: 14px; }
    </style>
</head>
<body>
<?
    $product = array('price' => '245.50');
    $part    = explode('.', $product['price']);
?>
    <span class="dollar_sign">$</span><span class="dollars"><?= $part[0] ?></span>.<span class="cents"><?= $part[1] ?></span>   
</body>
</html>
于 2013-06-18T07:41:53.100 回答
3

试试这个代码

var pri = $(".price").text();
var sig = pri.split(" ");
var dol_smbl = "<span style='font-size:16px;'>" + sig[0] + "</span>";
var digits = sig[1].split(".");
befr_dec = "<span style='font-size:22px;'>" + digits[0] + "</span>";
aftr_dec = "<span style='font-size:14px;'>." + digits[1] + "</span>";
$(".price").html(dol_smbl + " " + befr_dec + aftr_dec);
于 2013-06-18T08:10:50.810 回答
2

可以用一点 css 和 regex 漂亮地完成。看到这个小提琴

的HTML：

<span class="price">$250.50</span>

的CSS：

.currency { font-size:16px; }
.number { font-size:22px; }
.decimal { font-size:14px; }

的JavaScript：

 var price = $('span.price').text();  
    var pArry = price.match(/^(\$)(\d+)(\.\d+)?/);    
    var new_span = $(
        '<span class="currency">' + pArry[1] + '</span>' +
        '<span class="number">' + pArry[2] + '</span>' +
        '<span class="decimal">' + pArry[3] + '</span>');
    $('span.price').replaceWith(new_span);

完毕

于 2013-06-18T08:18:36.753 回答
1

像这样试试

var my_price = $(".price").text();
var dol_smbl = "<span style='font-size:16px;'>"+my_price[0]+"</span>";
var price = split(" ",my_price);
var price_arr = split('.',price[1]);
befr_dec = "<span style='font-size:22px;'>"+price_arr[0]+"</span>";
aftr_dec = "<span style='font-size:14px;'>."+price_arr[1]+"</span>";
$(".price").html(dol_smbl + " " + befr_dec  + aftr_dec);
于 2013-06-18T07:32:17.373 回答
1

最简单的方法是拆分该变量？看php函数explode()。

http://php.net/manual/de/function.explode.php

于 2013-06-18T07:32:26.510 回答
1

您可以尝试这种通用方法

$('.price').each(function () {
    var $this = $(this),
        txt = $this.text(),
        splt = txt.split('.'),
        spltFirst = splt.pop(),
        spn3 = $('<span/>', {
            text: spltFirst,
                'class': 'font-small'
        }),
        spltSecond = splt.pop(),
        spn1 = $('<span/>', {
            text: spltSecond.substring(0, spltSecond.lastIndexOf('$') + 1),
                'class': 'font-medium'
        }),
        spn2 = $('<span/>', {
            text: spltSecond.substring(spltSecond.lastIndexOf('$') + 1) + '.',
                'class': 'font-big'
        });
    $this.text('');
    $this.append(spn1).append(spn2).append(spn3);
});

检查小提琴

于 2013-06-18T08:06:03.617 回答
0

为这三个不同的段使用不同的 span 元素，并为它们分别设置类以分配不同的字体样式。基本上跨度是内联元素，所以你不需要担心它的位置。

例如：

渲染后你的标记应该是这样的，

<span class="price">
    <span class="currencySymbol">$</span>
    <span class="amt1">250</span>
    <span class="amt2">.50</span>
</span>

然后在 CSS 中：

.currencySymbol{ font-size:16px; } 
.amt1{ font-size:22px; } 
.amt2{ font-size:14px; }
于 2013-06-18T07:34:23.357 回答
0

仅使用 split() 的一种可能的简单动态方式。

这会将小数包含<small>在每个具有 class 的元素的标签中format。

document.querySelectorAll(".format").forEach((e) => {
  let txt = e.innerHTML.split(".")
  e.innerHTML = txt[0] + ".<small>" + txt[1] + "</small>"
})
.format {font-size:3rem}
small {font-size:1.4rem}
<div class="format">34454.545432</div>
<div class="format">0.0000463533</div>
<div class="format"><mark>Hello</mark> -8765.9876</div>

于 2020-01-17T21:18:06.640 回答