Jquery - Show And Hide Last 4 Numbers Of A Phone Number
Solution 1:
<divid="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 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/
Or if you don't want to use custom attributes, do this:
<divid="number">949<span>XXXX</span><spanstyle="display:none;">1234</span></div>$('#number').click(function() {
$(this).find('span').toggle();
});
Example: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.
<divid="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/
Solution 2:
Yes, you can do it like that (see 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);
});
where phone numbers should be coded like that:
<spandata-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).
Solution 3:
Very Quick Answer : More phone numbers bug :)
Telefon : 0 216 457 <spanonclick="this.innerHTML='49 47'">XX XX</span>Solution 4:
<divclass="overh brkword lheight18 pdingtop5 pdingleft8"><spanclass="small">Telefon</span><strongclass="">07XX XXX XXX</strong><ahref="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>
Post a Comment for "Jquery - Show And Hide Last 4 Numbers Of A Phone Number"