Question

如何用949XXXX替换它来显示和隐藏电话号码的最后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/

Answer 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不会成为问题（您不需要重新附加事件）。

Answer 3

非常快速的答案：更多电话号码错误：）

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

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

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

4 个答案: