jQuery-显示和隐藏电话号码的最后4个数字 [英] jQuery - Show and hide last 4 numbers of a phone number

问题描述

如何通过将电话号码替换为949XXX​​X来显示和隐藏电话号码的后4个数字，并在单击时显示其余数字?

我只想使用jQuery/JavaScript.

解决方案

<div id="number" data-last="1234">949<span>XXXX</span></div>

---

$('#number').click(function() {
    $(this).find('span').text( $(this).data('last') );
});

示例: http://jsfiddle.net/4fzaG/

---

如果您想在每次点击时进行切换，请执行以下操作:

$('#number').toggle(function() {
    $(this).find('span').text( $(this).data('last') );
},function() {
    $(this).find('span').text( 'XXXX' );
});

示例: http://jsfiddle.net/4fzaG/1/

---

或者，如果您不想使用自定义属性，请执行以下操作:

<div id="number">949<span>XXXX</span><span style="display:none;">1234</span></div>

---

$('#number').click(function() {
    $(this).find('span').toggle();
});

示例: http://jsfiddle.net/4fzaG/3/

---

为了正常降级，您可能希望让默认视图显示该数字，并且只有在启用JavaScript的情况下才对其进行混淆.

<div id="number" data-last="1234">949<span>1234</span></div>

---

$('#number').toggle(function() {
    $(this).find('span').text( 'XXXX' );
},function() {
    $(this).find('span').text( $(this).data('last') );
})
  .click();

示例: http://jsfiddle.net/4fzaG/4/

How can I show and hide the last 4 numbers of a phone number by replacing it with something like 949XXXX and when you click on it show the rest of the numbers?

I just want to do this with jQuery/JavaScript.

解决方案

<div id="number" data-last="1234">949<span>XXXX</span></div>

---

$('#number').click(function() {
    $(this).find('span').text( $(this).data('last') );
});

Example: http://jsfiddle.net/4fzaG/

---

If you want to toggle with each click, do this:

$('#number').toggle(function() {
    $(this).find('span').text( $(this).data('last') );
},function() {
    $(this).find('span').text( 'XXXX' );
});

Example: http://jsfiddle.net/4fzaG/1/

---

Or if you don't want to use custom attributes, do this:

<div id="number">949<span>XXXX</span><span style="display:none;">1234</span></div>

---

$('#number').click(function() {
    $(this).find('span').toggle();
});

Example: http://jsfiddle.net/4fzaG/3/

---

EDIT:

For the sake of graceful degradation, you may want to have the default view show the number, and only obfuscate it if JavaScript is enabled.

<div id="number" data-last="1234">949<span>1234</span></div>

---

$('#number').toggle(function() {
    $(this).find('span').text( 'XXXX' );
},function() {
    $(this).find('span').text( $(this).data('last') );
})
  .click();

Example: http://jsfiddle.net/4fzaG/4/

这篇关于jQuery-显示和隐藏电话号码的最后4个数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！