Question

任何人都可以帮我这个吗？当我尝试更换此货币符号时，它会移动span标记内的符号，这会导致我的其余代码出现问题。

由于

<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()，就会在<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（）时，它也会拉动内跨距。您需要做的是查看文本节点，请参阅How do I select text nodes with 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("£", "€");
        });
    }
});

FIDDLE

请注意，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 == '€' ? '£' : '€';
        });
    });
});

FIDDLE

Answer 5

使用除$（this）之外的其他选择器，有时会变得混乱。

jQuery替换文本问题

5 个答案: