0

うまくいけば、これを正しく説明できます。ページ内のコンテンツ ブロックに XML があります (カスタム CMS によって呼び出されます)。数値の価格 ($999.99) である 1 つのフィールドの値を取得する必要があります。次に、そのように価格をそのまま表示するのではなく、画像として表示する必要があります。

主な問題は、フォントを埋め込むことができず、価格のスタイルを正確にする必要があるため、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 に答える