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，只需将跨度打破一秒钟并替换货币符号，然后替换跨度。我之所以这么说是因为你一打电话就.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> -->

因此，为避免这种情况，您可以在更改货币时移动节点。这也使您能够处理符号位置和其他事情（也许您想添加一个format使 USD 看起来像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);
    }
  });
});

重构了一下（避免使用替换），但实际上也只是将跨度移入和移出节点，以便您可以放置​​符号。我还制作了符号结果对象，以便您可以添加其他信息（例如如何使用euro将符号放置在值的右侧pos）。

Answer 2

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

到

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

在这里演示http://jsbin.com/usuraw/4/edit

Answer 3

您选择外部跨度中的所有内容，当您使用 .text() 时，它也会拉动内部跨度。您需要做的是查看文本节点，请参阅如何使用 jQuery 选择文本节点？

Answer 4

以下是使用 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("£", "€");
        });
    }
});

小提琴

请注意，对于某些旧浏览器，trim() 将需要一个 polyfill，或者您可以只使用 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) 以外的其他选择器，有时会让人感到困惑。