如何用'一個按鈕'在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/