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

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');