Geek Answers Handbook

JQuery - Show and hide the last 4 phone numbers

How can I show and hide the last 4 phone numbers by replacing it with something like 949XXXX, and when you click on it, display the rest of the numbers?

I just want to do this using jQuery / JavaScript.

+4
source share
4 answers
<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 switch with every click, do the following:

 $('#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 do not want to use custom attributes, do the following:

 <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 graceful degradation, you might want the view to display a number by default and only obfuscation 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/

+13
source

Very quick answer: more phone number errors :)

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

Yes, you can do it like this (see jsfiddle for 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); });

where phone numbers should be encoded as follows:

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

This will display / hide the last letters with each click. It associates events with <body> (you can change it into some container with phone numbers) and delegates them to the corresponding elements on the page, so using AJAX will not be a problem (you will not need to re-attach events).

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

More articles:


All Articles