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

【问题标题】：jQuery - Show and hide last 4 numbers of a phone numberjQuery - 显示和隐藏电话号码的最后 4 个数字
【发布时间】：2015-09-12 00:22:48
【问题描述】：

如何通过将电话号码替换为 949XXXX 之类的内容来显示和隐藏电话号码的最后 4 个号码，然后单击它显示其余号码？

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

【问题讨论】：

标签： javascript jquery

【解决方案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/

【讨论】：

很好地使用custom data attributes

【解决方案2】：

是的，你可以这样做（见jsfiddle as a proof）：

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

电话号码应该这样编码：

<span data-replace="555-41-23">555-XX-XX</span>

这将在每次点击时显示/隐藏最后一个字母。它将事件绑定到<body>（您可以将其更改为带有电话号码的某个容器）并将它们委托给页面上的适当元素，因此使用 AJAX 不会成为问题（您无需重新附加事件)。

【讨论】：

【解决方案3】：

非常快速的回答：更多电话号码错误:)

Telefon : 0 216 457 <span onclick="this.innerHTML='49 47'">XX XX</span>

【讨论】：

【解决方案4】：

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

【讨论】：