javascript jQuery - 显示和隐藏电话号码的最后 4 个数字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6334751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Show and hide last 4 numbers of a phone number
提问by Morne Zeelie
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?
如何通过将电话号码替换为 949XXXX 之类的内容来显示和隐藏电话号码的最后 4 个号码，并在单击它时显示其余号码？
I just want to do this with jQuery/JavaScript.
我只想用 jQuery/JavaScript 来做到这一点。
回答by user113716
<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/
示例：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/
示例：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/
示例：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.
为了优雅降级，您可能希望默认视图显示数字，并且仅在启用 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();
Example:http://jsfiddle.net/4fzaG/4/
回答by alpc
Very Quick Answer : More phone numbers bug :)
非常快速的回答：更多电话号码错误 :)
Telefon : 0 216 457 <span onclick="this.innerHTML='49 47'">XX XX</span>
回答by Tadeck
Yes, you can do it like that (see jsfiddle as a proof):
是的，你可以这样做（见jsfiddle 作为证明）：
jQuery('body').delegate('span[data-replace]', 'click', function(event){
event.preventDefault();
var older_value = jQuery(this).html();
jQuery(this)
.html(jQuery(this)
.attr('data-replace'))
.attr('data-replace',older_value);
});
where phone numbers should be coded like that:
电话号码应该像这样编码：
<span data-replace="555-41-23">555-XX-XX</span>
This will show/hide last letters with each click. It binds events to the <body>(you can change it into some container with the phone numbers) and delegates them to the proper elements on the page, so using AJAX will not be an issue (you will not need to re-attach events).
这将在每次点击时显示/隐藏最后一个字母。它将事件绑定到<body>（您可以将其更改为带有电话号码的某个容器）并将它们委托给页面上的适当元素，因此使用 AJAX 将不是问题（您不需要重新附加事件）。
回答by Tasente Tashy
<div class="overh brkword lheight18 pdingtop5 pdingleft8">
<span class="small">Telefon</span>
<strong class="">07XX XXX XXX</strong>
<a href="javaScript:void(0);" rel="phone" class="{clickerID:'phone_details','path':'phone', 'id':'WlCT', 'id_raw': '13667831' } atClickTracking link spoiler small link-phone nowrap">
<span>Arata numarul de telefon</span>
</a>
</div>
