Как скрыть часть номера или почты и показывать при нажатии на кнопку

Как скрыть часть номера или почты и показывать при нажатии на кнопку - лучшее решение, которое я нашел. Задача в принципе простая - отслеживать цели потенциальных клиентов в системе аналитики по событию. И периодически требуется в работе любому, кто занимается интернет-маркетингом

Сначала решение, а потом болтовня и рассказы о том, как это было...

Первая часть кода - условная разметка для удобства (можно не обращать внимания)

 
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
       

После библиотеки подключаем сам скрипт, который имеет следующий вид:

Вторая часть кода - условная разметка для удобства (можно не обращать внимания)

 
    
<script>
jQuery(document).ready(function($){
$.fn.textToggle = function(cls, str) {
return this.each(function(i) {
$(this).click(function() {
var c = 0, el = $(cls).eq(i), arr = [str,el.text()];
return function() {
el.text(arr[c++ % arr.length]);
}}());
})};
$(function(){
$('.sh_nmr').textToggle(".sh_nmr","").click();
$('.sh_nmr').textToggle(".num_hide","ХХХХХХХ").click();
});
});
</script>
       

В этом скрипте Вам нужны в будущем только две предпоследние строки:

 
    
        $('.sh_nmr').textToggle(".sh_nmr","").click();
        $('.sh_nmr').textToggle(".num_hide","ХХХХХХХ").click();
    

Первая строка отвечает за скрытие слова ПОКАЗАТЬ после нажатия. Вторая - за замену части номера, ну или всего, если Вы немного переделаете. Чтобы скрипт работал, Вам нужно свой номер телефона, часть которого Вы хотите скрыть, обернуть в некоторые теги и добавить кнопку ПОКАЗАТЬ. Выглядеть номер с кодом должен примерно так:

Третья часть кода - условная разметка для удобства (можно не обращать внимания)

 
    
        +1234<span class="num_hide">567890</span> <span class="sh_nmr">показать</span>
      

Часть или весь номер нужно заключить в тег span с классом - num_hide. После номера добавить кнопку ПОКАЗАТЬ, заключенную в тег span с классом - sh_nmr

Источник материала

"Детские" примечания

Проверить библиотеку jquery и НЕ подключать, если уже подключена на сайте.
*Важно! Библиотека должна быть вызвана перед кодом, иначе не сработает скрипт.
**На некоторых сайтах скрипты подключаются в подвале для ускорения загрузки страниц - проверить библиотеку там и разместить между тегами head, ПЕРЕД вызовом скрипта.

Что я искал и как решил

В реализации же все оказалось сложнее. Этот вариант хоть и работает сразу, но эстетически меня не устраивал, тот факт, что надпись была справа от скрываемого телефона.

Мне же было нужно, чтобы была просто надпись или кнопка "ПОКАЗАТЬ НОМЕР" или "ПОКАЗАТЬ ПОЧТУ", и при клике на эту надпись появлялся бы телефон или почта соответственно.

А так как я в js соображаю не больше, чем в Китайском языке, вернулся к поиску решений.

Нашел еще несколько вариантов, но в итоге все оказались или не рабочими или у меня не хватило терпения ковыряться с ними.

В общем я было уже смирился и снова вернулся к этому варианту и начал работать со стилями.

А ларчик просто открывался

Просто во второй части кода в самом низу, нужно стереть иксы (ХХХХХХХ)... ))

Уважаемые читатели, пожалуйста, не "тычьте" на сайте на эти кнопки в "неположенных" местах )). Дело в том, что на них настроены цели в метрике и если Вы просто для интереса будете нажимать, статистика будет искажена.

Чтобы посмотреть, как это работает, я поместил отдельную кнопку сюда (да и цель на нее установил :-) жмите, сколько хотите)

Кто нажмет на эти кнопки за пределами этой страницы - тот Филипп Киркоров! Если Вы подумываете что-то заказать у меня, то на Вас это правило не действует

Вариант №1 +1234567890 Показать часть номера

Вариант №2 +1234567890 Показать номер

Вариант №3 adres@pochtbl.ru Показать фигу почту, ссылку на вк, ок, фб

Вариант №4 Перейти в раздел "Чердак"Показать ссылку

Кстати о ссылках. Тоже не сразу сработало, чтобы кликабельной была именно ссылка, поэтому делюсь.
Выглядеть будет так:

 
    
        <a href="#"><span class="num_hide">Перейти в раздел "Чердак"</span></a><span class="sh_nmr" style="color:#222222;"><b>Показать ссылку</b></span>
    

В качестве бонуса - как установить в метрике цель на кнопку "показать"

Создаем цель в метрике с произвольным, но лучше с понятным, идентификатором.
Например: a_clik_post_pokzat_tel
Устанавливаем "Тип условия:" на "JavaScript-событие".
Указываем понятное "название" для аналитики.

После чего берем событие:

 
    
 onclick="ym(XXXXXX, 'reachGoal', 'TARGET_NAME'); return true;"
    

Где XXXXXX - это номер счетчика,
а TARGET_NAME - это название события (в нашем случае "a_clik_post_pokzat_tel" без кавычек).

Почитать про события можно >>здесь - яндекс справка<< , там немного, событие на кнопку, на ссылку, на форму и на передачу коммерческих данных.

И вставляем в ссылку (или кнопку - у них одинаковые события).

Получилось так:

 
    
 <a href="#" onclick="ym(37761890, 'reachGoal', 'a_clik_post_pokzat_tel'); return true;">Перейти в раздел "Чердак"</a></span>
    

Полный вариант с событием и с кнопкой "показать" будет выглядеть так:

 
    
 <a href="#" onclick="ym(37761890, 'reachGoal', 'a_clik_post_pokzat_tel'); return true;"><span class="num_hide">Перейти в раздел "Чердак"</span></a><span class="sh_nmr" style="color:#222222;"><b>Показать ссылку</b></span>
    

* Примечание: В ссылках на телефон ("tel:") и почту ("mailto:") не ставить атрибут (target="_blank") - выдает ошибку на мобильных.

**Для отслеживания нажатия на ссылку/почту/телефон можно поставить еще одно событие и цель в метрике соответственно ;-)

"Делай дела от сердца" - © Руставели

Назад