jQuery替換文字問題

Question

任何人都可以幫我這個嗎？當我嘗試替換此貨幣符號時，它會移動span標記內的符號，這會導致我的其他代碼出現問題。

我已經添加了我的代碼在這裏jsbin：http://jsbin.com/usuraw/2

感謝

<select id="inv_currency"> 
    <option value="£">£</option> 
    <option value="€">€</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，只是打破了一秒的跨度和替換貨幣符號，然後替換跨度。我之所以這樣說，是因爲只要您致電.text()，您就會在.currency之內失去<span>的孩子。基本上：

<!-- 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> --> 

所以，要避免這種情況，您可以在您去更改貨幣時隨時移動節點。這也讓你能夠玩符號位置和其他東西（也許你想添加一個format功能，使美元看起來像100.00和歐元看起來像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); 
    } 
    }); 
}); 

重構一個位（避免使用替代），也只是基本移入和移出該節點的，所以你可以把符號的跨度。我還製作符號結果對象，以便您可以添加其他信息（例如euro如何使用pos將符號放置到的右邊）。

Answer 2

使用其他選擇不是$（本），原來混亂的時候。

Answer 3

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

到

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

演示這裏http://jsbin.com/usuraw/4/edit

Answer 4

外跨度你選擇的一切，當你使用的.text（）是拉動內跨度爲好。你需要做的是看看文本節點，看How do I select text nodes with jQuery?

Answer 5

下面是你如何與textnodes做到這一點：

$('#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("£", "€"); 
     }); 
    } 
}); 

FIDDLE

注意修剪（）將需要填充工具對一些舊的瀏覽器，或者你可以只使用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 == '€' ? '£' : '€'; 
     }); 
    }); 
}); 

FIDDLE