案例1：受控输入

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数据方法在span元素本身中存储原始值，该元素用于显示实际值。

点击Hide后，使用prev()方法获取上一个范围，并将其文本设置为原始值，将X中的所有数字替换为Hide。然后将链接文字从Show更改为Show。

接下来，当您点击prev()时，使用Show方法获取上一个范围，并将其文本设置为原始值，并将链接文本从Hide更改为{{1}}。

参考文献： .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/

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

5 个答案:

案例1：受控输入

案例2：不受控制的输入