Форум

zahar_92 · #1 (**permalink**) 15.05.2016, 18:01

Народ подскажите.. Как скрыть номер телефона, например в виде +7 XXX XXXXXXX , а при клике на ссылку Показать, номер отображается +7 999 1112223 Возможно ли это? Или подмену какую-нибудь сделать..

рони · #2 (**permalink**) 15.05.2016, 18:46

zahar_92,
Скрыть/показать текст звездочками (*)

zahar_92 · #3 (**permalink**) 15.05.2016, 19:26

Спасибо, работает! Еще вопросик, что нужно добавить в эту конструкцию, чтобы при клике на ссылку не швыряло вверх страницы?

рони · #4 (**permalink**) 15.05.2016, 19:40

zahar_92,
какой вариант вы взяли и html ваше?

рони · #5 (**permalink**) 15.05.2016, 19:42

zahar_92,
обычно достаточно красное добавить
.click(function(event) { event.preventDefault();

zahar_92 · #6 (**permalink**) 15.05.2016, 20:06

<script>
  $.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(){
$('.click-tel').textToggle(".hide-tail","+7XXXXXXX").click()
});
</script>

<span class="hide-tail"><?= $v ?></span> //тут телефон
<a href="#" class="click-tel">показать телефон</a>

В принципе его работа меня устраивает. Не нравятся два момента: 1. при нажатии на ссылку швыряет вверх страницы и 2. при загрузке сайта, телефон сначала показывается на пару секунд, а потом скрывается.
И еще, мне нужно закрыть 2 номера на одной странице с классом hide-tail, а скрипт скрывает только один из них. Как сделать, чтобы скрывались оба телефона? Может присвоить разные классы?

рони · #7 (**permalink**) 15.05.2016, 20:50

Сообщение от zahar_92

а скрипт скрывает только один из них.

не понимаю

zahar_92 · #8 (**permalink**) 15.05.2016, 21:16

На странице 2 телефона с классом hide-tail, а скрипт скрывает один из них, а второй остается в обычном виде.

Кто-нибудь подскажите, пожалуйста, что нужно добавить в этот скрипт:

<script>
  $.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(){
$('.click-tel').textToggle(".hide-tail","+7XXXXXXX").click()
});
</script>

что бы не дергало страницу вверх при клике на ссылку и скрипт скрывал оба номера с общим классом

рони · #9 (**permalink**) 15.05.2016, 21:27

zahar_92,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hide-tail{
    display: none;
  }

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

 <script>
 $.fn.textToggle = function(d, b, e) {
    return this.each(function(f, a) {
        a = $(a);
        var c = $(d).eq(f),
            g = [b, c.text()],
            h = [a.text(), e];
        c.text(b).show();
        $(a).click(function(b) {
            b.preventDefault();
            c.text(g.reverse()[0]);
            a.text(h.reverse()[0])
        })
    })
};
$(function(){
$('.click-tel').textToggle(".hide-tail","+7XXXXXXX","скрыть телефон")
});
</script>

</head>

<body>

<span class="hide-tail">+7 999 1112223</span> //тут телефон


<a href="#" class="click-tel">показать телефон</a> <br>

<span class="hide-tail">+7 999 1112223</span> //тут телефон


<a href="#" class="click-tel">показать телефон</a>
</body>
</html>

zahar_92 · #10 (**permalink**) 15.05.2016, 21:51

Благодарю за ответ! Вверх страницы теперь не кидает, но телефон все равно скрывает только один. Классы одинаковые, проверял. У меня один телефон вверху страницы, другой внизу. Если оставить один, например вверху, то он скрывается. Если оставить и вверху и внизу, то нижний скрывается а верхний нет..

И еще вопрос, можно ли после нажатия на ссылку показать номер сделать ее не кликабельной, чтобы при повторном нажатии не скрывала номер?

Форум

Справочник

Discord чат

Курсы javascript