jQuery-显示和隐藏电话号码的最后4个数字 [英] jQuery - Show and hide last 4 numbers of a phone number
问题描述
如何通过将电话号码替换为949XXXX来显示和隐藏电话号码的后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屋!