jquery - jQuery 置換テキストの問題

Question

誰でもこれを手伝ってもらえますか？これで通貨記号を置き換えようとすると、シンボルが span タグ内に移動し、残りのコードで問題が発生します。

コードを jsbin に追加しました: http://jsbin.com/usuraw/2

ありがとう

<select id="inv_currency">
    <option value="£">£</option>
    <option value="€">€&lt;/option>
</select>

<span class="invE_balance currency">
£
<span>0.00</span>
</span>

JS:

$('#inv_currency').on('change', function() {

    var currency = $('.currency');

    if ($(this).val() == 'pound')   {
        currency.each(function( index ) {
            var text = '';
            text = $(this).text();
            text = text.replace("€", "£");
            $(this).text(text);
        });
    }
    else    {
        currency.each(function( index ) {
            var text = '';
            text = $(this).text();
            text = text.replace("£", "€");
            $(this).text(text);
        });
    }
});

Answer 1

に入ることなく、最も簡単な方法はtextNodes、スパンを 1 秒間分割して通貨記号を置き換え、次にスパンを置き換えることです。私がこれを言う理由は、あなたが電話するとすぐに.text()子供を失う<span>からです.currency。基本的：

<!-- original -->
<span class="currency">
  £ <span>0.00</span>
</span>

var currency = /*above .currency node */;
currency.text(currency.text().replace('£','€'));

<!-- resulting in -->
<span class="curency">€ 0.00</span>
<!-- note how you lose the child <span> -->

したがって、これを回避するために、通貨を変更するときにノードを移動して遊ぶことができます。これにより、シンボルの位置やその他のものをいじることもできます (おそらく、formatUSD を のよう100.00に、EURO を のようにする関数を追加する必要があります0,00)。だから、ここに私が提案するものがあります：

var currencySymbols = {
  pound: {
    symbol: '£',
    pos: 'left'
  },
  euro: {
    symbol: '€',
    pos: 'right'
  },
  usd: {
    symbol: '$',
    pos: 'left'
  }
};

//* currency
$('#inv_currency').on('change', function() {
  var symbol = currencySymbols[$(this).val()] || currencySymbols['euro'];
  $('.currency').each(function(i,e){
    var $span = $('span',this);
    $(this).empty().text(symbol.symbol);
    if(symbol.pos === 'left'){
      $span.appendTo(this);
    }else{
      $span.prependTo(this);
    }
  });
});

少しリファクタリングされました (replace の使用は避けてください) が、基本的にスパンをノードの内外に移動して、シンボルを配置できるようにします。また、シンボルの結果オブジェクトを作成して、追加情報を追加できるようにします (を使用して値の右側euroにシンボルを配置する方法など)。pos

Answer 2

外側のスパンですべてを選択し、.text() を使用すると、内側のスパンもプルされます。必要なことは、テキスト ノードを確認することです。「 jQuery でテキスト ノードを選択するにはどうすればよいですか?」を参照してください。

Answer 3

    if ($(this).val() == 'pound')   {

に

if ($(this).val() == '£')   {

デモはこちらhttp://jsbin.com/usuraw/4/edit

Answer 4

そして、テキストノードでそれを行う方法は次のとおりです。

$('#inv_currency').on('change', function () {
    var currency = $('.currency');
    if (this.value.trim() == '£') {
        currency.each(function (index) {
            var elem = $(this).contents().filter(function() {
                return this.nodeType === 3;
            });
            var text = elem.text();
            elem[0].nodeValue = text.replace("€", "£");
        });
    } else {
        currency.each(function (index) {
            var elem = $(this).contents().filter(function() {
                return this.nodeType === 3;
            });
            var text = elem.text();
            elem[0].nodeValue = text.replace("£", "€");
        });
    }
});

フィドル

一部の古いブラウザーでは、trim() にはポリフィルが必要になることに注意してください。または、代わりに jQuery の $.trim() を使用することもできます。

楽しみのために、より短いより効率的なバージョンを次に示します。

$('#inv_currency').on('change', function () {
    $('.currency').each(function (index, elm) {
        var elem = $(elm).contents().filter(function () {
            return this.nodeType === 3;
        }).get(0);
        elem.nodeValue = elem.nodeValue.replace(/(\€|\£)/g, function(x) {
            return x == '€' ? '£' : '€';
        });
    });
});

フィドル

Answer 5

$(this) 以外のセレクターを使用すると、混乱することがあります。