jQuery - 显示和隐藏电话号码的最后4个号码

Question

如何用949XXX​​X替换它来显示和隐藏电话号码的最后4个号码,当你点击它时显示剩下的数字？

我只想用jQuery/JavaScript来做这件事.

Answer 1

<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/