2

私は e コマース サイトで作業していますが、設計どおりに価格をフォーマットするのに問題があります。

価格は次のように表示されます。

 <p class="price">£900.00</p>

サイトに表示されているすべての価格 (クラス価格) を取得し、次のように再フォーマットする必要があります。

<p class="price"><span>£</span> 900 <span>.00<span></p>

したがって、特定のCSSスタイルを小数と£記号に追加できるようになった後

これを行うアイデアはありますか？

ところで、バックエンドで実行したため、JS / jquery を介して実行する必要があります。競合が発生したため、クライアントで実行する必要があります。

前もって感謝します

4

6 に答える 6

4

以下は、すべての種類の通貨記号で機能します。これが作業中のフィドルです。

$('.price').each(function (idx, val) {
    var price = $(this).text();
    var newOne = price.match(/^(.)(\d+)\.(\d+)$/);
    $(this).html("<span>" + newOne[1] + "</span>" + newOne[2] + ".<span>" + newOne[3] + "</span>");
});
于 2013-03-18T00:01:24.950 に答える
3

フロントエンドでこれを行う必要はありませんが、バックエンドの「競合」を指摘するほうがよいでしょう。

$(function(){

  var $el, price;

  $('.price').each(function(item){

    $el = $(this);
    price = $el.text().substr(1);
    $el.empty().append(

      $("<span></span>", { class : "currency", text: "£"})

    ).append( price.split('.')[0])
    .append(

      $("<span></span>", { class : "decimals", text: "." + price.split('.')[1]})    

    );

  });

});

ワーキングフィドル。

于 2013-03-17T23:53:28.030 に答える
1

デモ

これは 、 :£900.00のような文字列に対して機能します。残りはご存知のとおりです。£900000.00123$560125.14500

var val = '£900.00';
var currSign = val.charAt(0);

currSignになります£

var amount = val.substring(1);

amountになります900.00

 var left = amount.split('.')[0];
 var right = "."+amount.split('.')[1];

leftなる900 rightだろう.00

とにかく使ってください。

<p class="price"><span>$currSign</span> $left <span>$right<span></p>
于 2013-03-17T23:52:38.473 に答える
0

私は提案します：

$('.price').html(function(i,h){
    return h.replace(/([£$])(\d+)(.\d{2})/,'<span>$1</span><span>$2</span><span>$3</span>');
});

JSフィドルデモ。

  • またはのいずれかで([£$])ある通貨文字をキャプチャします。£$
  • (\d+)1つ以上の数字をキャプチャし、
  • (.\d{2})ピリオドとそれに続く2つの数字をキャプチャします。

、、およびこれらの各一致を順番に参照します$1。$2$3

そして、これらのスタイルを設定します（明示的なクラス名がなくても：

p span {
    color: #000;
}

p span:first-child {
    color: #999;
}

span:first-child + span {
    font-weight: bold;
}

span:last-child {
    font-size: 80%;
}

JSフィドルデモ。

参照：

于 2013-03-18T00:05:16.317 に答える
0 
$('.price').each(function() {
    $(this).html($(this).text().replace(/(£)(\d+)(\.\d\d)/, '<span>$1</span> $2 <span>$3</span>');
});
于 2013-03-17T23:53:31.213 に答える
0 
$("p.price").each(function() {
    var oldprice = $(this).text();
    var split = oldprice.match(/^£(\d+)(\.\d+)$/);
    if (split) {
       $(this).html('<span>£</span> ' + split[1] + ' <span>'+split[2]+'</span>');
    }
});
于 2013-03-17T23:52:09.620 に答える