如何用'一个按钮'在jQuery中用'x'替换'数字'？

Question

有谁知道如何做替换多个文本通过点击一个按钮与jQuery？

我已经建立了一个网站，显示一些文本/数据，例如; “100.00英镑”，但我需要的是能够用“英镑XXX.XX”替代这些货币价值，如“隐藏”按钮就像您在某些银行网站上一样。例如，一个网页有：

£100.00，200.00£，£130.00等等等等。

......所以，当用户按下隐藏按钮，所有的页转到£XXX号码的.XX。理想情况下，按钮应显示“显示”而不是“隐藏”，并在切换时切换回来。

这是一个静态的虚拟网站，所以没有数据库。

我怀疑这是最好的处理与jQuery？

感谢您的时间，

D.

Answer 1

案例1：控制输入

假设你至少可以包装所有的货币值，像这样的东西：

<span class="money-value">£200.00</span> 
<span class="money-value">£300.50</span> 

而且你可以添加按钮声明：

<button id="secret-button">hide</button> 

然后，你可以有一些jQuery代码这样做：

/** 
* Simple search and replace version. 
*/ 
$(function() { 
    $("#secret-button").click(function() { 
    $(".money-value").html($(".money-value").html().replace(/[0-9]/g,"X")); 
    }); 
});​ 

或更先进的一个具有：

/** 
* Complet version. 
* 
* 1) on button click, if asking to hide: 
* 1.1) iterate over all entries, save their text, and replace it with markers 
* 1.2) toggle the button's text to "show" 
* 2) on button click, if asking to show: 
* 2.1) iterate over all entries, restore previous text 
* 2.2) clear the hidden store 
* 2.3) toggle the button's text to "hide" 
*/ 
$(function() { 
    var hiddenStore = []; 

    $("#secret-button").click(function() { 
     if ($(this).html() == "hide") { 
     $(".money-value").each(function() { 
      var text = $(this).html(); 

      hiddenStore.push(text); 
      $(this).html(text.replace(/[0-9]/g,"X")); 
     }); 
     $(this).html("show"); 
     } else { 
     $(".money-value").each(function (i) { 
      var text = hiddenStore[i]; 

      $(this).html(text); 
     }); 
     hiddenStore = []; 
     $(this).html("hide");   
     } 
    }); 
});​ 

完整的解决方案是在这里：在这里看到：http://jsfiddle.net/u79FV/

备注：

• 这不会输入外地工作值
• 这是假定您的文本项已被标记如上图所示
• 请问您要使用按钮的状态变化的东西。
• 保存这些值并放回原处。
• 即使动态添加新字段也可以工作。
• Shankar Sangoli的answer使用不同的方式保存存储的数据，您可以考虑使用不同的方式（使用jQuery .data()方法）。
• 您可能希望将按钮切换为<input type="button" />标签，在这种情况下，您将使用.val()而不是.html()来切换其文本。

案例2：自由输入

假设你没有对其中的值可以显示出来，那么你需要做一些更复杂的，这是在整个页面看起来控制看起来像货币格式的东西。 我建议反对它。

但是，jQuery Highlight插件可能是需要看的东西，因为它的代码做了类似的事情（因为它搜索要修改的代码段），然后您可以重用一些解决方案1以使其适合你的目的。

尽管如此，这种设计很难用傻瓜式设计。

Answer 2

你可以使用正则表达式：

var expression = /\d{1}/g; 
var newString = myString.replace(expression,"X"); 

然后径直往newString成任何控制你需要它出现在

编辑：
一个jQuery的想法这样的事情将是给所有具有这些数字一个共同的类标识符的控制，使他们很容易与选择抢：

$(".numbers").each(function() { 
    $(this).text($(this).text().replace(/\d{1}/g, "X")); 
} 

...更具可读性...

$(".numbers").each(function() { 
    var text = $(this).text(); 
    var newText = text.replace(/\d{1}/g, "X"); 
    $(this).text(newText); 
} 

Answer 3

如果你的标记是这样的，你可以试试这个。

<span>£1000.00</span><span class="showhide">Hide</span> 

JS

$('.showhide').click(function(){ 
    var $this = $(this); 
    var $prev = $this.prev(); 
    if(!$prev.data('originalvalue')){ 
     $prev.data('originalvalue', $prev.text()); 
    } 
    if($this.text() == 'Hide'){ 
     $this.prev().text($prev.data('originalvalue').replace(/\d{1}/g,"X")); 
     $this.text('Show'); 
    } 
    else{ 
     $prev.text($prev.data('originalvalue')); 
     $this.text('Hide'); 
    } 
}); 

在上面的代码我基本上存储使用被用于显示的实际值的跨度元件自身内的jQuery数据的方法的原始值。

一旦你点击Hide，获得使用prev()方法上次的量程，并与原来的值由X替换它的所有号码设置其文本。然后将链接文本从Hide更改为Show。

下一页当你点击Show得到使用prev()方法上次的量程，并设置其文本与原始值和Show链接文本改为Hide。

参考文献：.prev()，.data()

Answer 4

$('#yourButton').click(function(){ 
    var saveText = $('body').text(); 

    $(this).data('oldText', saveText); 

    if ($(this).text() == "Hide"){ 
     $('body').text($('body').text().replace(/\d{1}/, "X")); 
     $(this).text('Show'); 
    } 
    else{ 
     $('body').text($(this).data('oldText')); 
     $(this).text('Hide'); 
    } 
}); 

这实际上是一种复杂的问题。您需要能够保存文本的编号状态，以便您可以来回切换。上面的代码没有经过测试，但希望它会给你一个想法，你需要做什么。

Answer 5

function toggleMoney() { 
    $('.money').each(function() { 
     var $$ = $(this), t = $$.text(); 
     $$.text($$.data('t') || t.replace(/\d/g, 'X')).data('t', t); 
    }); 
    $('#toggleButton').text($('.money').text().match(/\d/) ? 'hide' : 'show'); 
} 

http://jsfiddle.net/DF88B/2/