Как можно скрыть часть номера телефона (например, последние четыре цифры заменить на X), а при нажатии показать?
<span class="phone_number">+74951182647<span class="phone_number_active"> Показать</span></span>
$(".phone_number .show").click(function(){
var $parent = $(this).closest(".phone_number");
$parent.find(".value").text($parent.data("phone"));
$(this).hide();
$parent.find(".hide").show();
});
$(".phone_number .hide").click(function(){
var $parent = $(this).closest(".phone_number");
var phone = $parent.data("phone");
phone = phone.substring(0, phone.length - 4) + "xxxx";
$parent.find(".value").text(phone);
$(this).hide();
$parent.find(".show").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="phone_number" data-phone="+74951182647">
<span class="value">+7495118xxxx</span>
<span class="show">Показать</span>
<span class="hide" style="display:none;">Не показать</span>
</span>
Вот максимально настраиваемое решение, можете экспериментировать с настройками как угодно:
$(function(){
let holder=$('.phone_number'),
button=$('.phone_number_active'),
number=holder.text(),
symbolsForHide=4,
show=()=>{
holder.text(number)
button.removeClass('show').text('Скрыть')
},
hide=()=>{
holder.text(number.replace(new RegExp('(.+).{'+symbolsForHide+'}$'),"$1"+'x'.repeat(symbolsForHide)))
button.addClass('show').text('Вскрыть')
}
button.click(function(){
if($(this).hasClass('show')) show()
else hide()
})
hide()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="phone_number">+74951182647</span> <span class="phone_number_active show">Показать</span>