jquery - 点击时用正确的信息替换隐藏的文本

Question

我正在创建一个在线简历，并希望隐藏我的部分个人详细信息，直到用户单击一个按钮来显示它。我希望这将防止垃圾邮件发送者能够轻松获取我的个人详细信息。

这个概念基本上就是gumtree.com.au所做的，对于澳大利亚以外的人来说，如下图所示：

我的页面的 HTML 是：

<div class="personal">
    <p>042323**** <span id="phone">show number</span></p>
</div>

我打算使用 jQuery 删除星号，然后添加我号码的最后 4 位数字（我打算将其硬编码到 JavaScript 文件中）。

首先，这是做这样的事情的最佳方式吗？如果是这样，我如何删除星号并使用 jQuery 将它们替换为正确的详细信息？

Answer 1

将您的号码放在这样的标签中 -

<p><span id='number'>042323****</span> <span id="phone">show number</span></p>

然后你可以这样做 -

var num = 1234; // hard-coded number - last 4 digits
$('#phone').on('click',function(){
    $('#number').text(function(_,txt){
        return txt.replace('****',num);
    });
});

Answer 2

你可以这样做。

HTML

<div class="personal">
   <p>042323**** </p><span pno="0423231212" id="phone">show number</span>
</div>

将您的原始号码存储在 pno 属性中，然后编写此 jQuery 代码以在单击显示号码时显示它。

jQuery

jQuery("#phone").click(function() {
    jQuery(".personal").find("p").html(jQuery(this).attr("pno"));
});

您还可以在点击时显示您的号码的动画。jQuery 中有多种可用的方法。

有关各种效果的动画功能，请参阅此 - http://api.jquery.com/category/effects/

jQuery example for fade animation

jQuery("#phone").click(function() {
    jQuery(".personal").find("p").html(jQuery(this).attr("pno")).hide().fadeIn("slow");
});

Answer 3

更改了html：

<div class="personal">
    <p><span id="personal-phone-number">042323****</span><span id="phone">show number</span></p>
</div>

jQuery：

$(document).ready(function(){
      $('#phone').click(function(){
         $('#personal-phone-number').html('0438866666');
         $(this).hide();
       });
   });

Answer 4

一个简单的方法是用完整的数字替换整个数字

$('#phone').closest('p').html('0438866666');