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