@masalex

Почему ломается скрипт показа/скрытия телефона, если добавить более одного телефона?

Нашел скрипт для скрытия/показа телефона, доработал под себя. Проблема следующая: если телефон один - все работает как нужно, если добавить второй телефон - то начинаются проблемы. Телефонов на странице будет много.

Пример здесь

Либо вот код:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <title>Document</title>
</head>
<body>

<div class="div">
	<a href="javascript:;" class="phone_number">+7 (495) 118-26-47</a> <span class="phone_show">Показать</span>
</div>
<div class="div">
  <a href="javascript:;" class="phone_number">+7 (495) 853-85-32</a> <span class="phone_show">Показать</span>
</div>


<script>

$(function(){
var phone_number = $('.phone_number');
var link = $('.phone_number').attr('href');
var button = $('.phone_show');
var number = phone_number.text();
symbolsForHide = 10;

function hide_phone(){
  $('.phone_number').text(number.replace(new RegExp('(.+).{'+symbolsForHide+'}$'),"$1"+'...'));
}

console.log(number);

button.click(function(){
$(this).siblings('.phone_number').text(number);
$(this).siblings('.phone_number').attr('href', 'tel:' + number);
$(this).remove();
});

hide_phone();

})
</script>


</body>
</html>
  • Вопрос задан
  • 106 просмотров
Решения вопроса 3
0xD34F
@0xD34F Куратор тега JavaScript
Потому что вы текст всех телефонов в одну переменную сложили. Надо как-то разделить. Например, можно прицепить полный телефон в виде атрибута к соответствующему элементу.

Скрытие телефонов будет выглядеть так:

const reg = new RegExp(`(.+).{${symbolsForHide}}$`);
$('.phone_number')
  .attr('data-phone', function() {
    return $(this).text()
  })
  .text((i, text) => text.replace(reg , '$1...'));

А код обработчика клика кнопки показа так:

const
  $this = $(this),
  $phone = $this.siblings('.phone_number'),
  phone = $phone.data('phone');

$phone.text(phone).attr('href', `tel: ${phone}`);
$this.remove();

https://jsfiddle.net/431j80t7/
Ответ написан
FeST1VaL
@FeST1VaL
Тихий
Как то так) Немного переписал код.

https://jsfiddle.net/fest1val/gpbt21hj/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@levantez
смотрите селекторы, скорее всего в js вы выбираете как $('#phone')...... а надо переделать на что-то типа $('.phone')... и сделать не id="phone", а class="phone", а вообще Вы дали очень мало исходной информации

Вам надо делать вместо
hide_phone();
вот так
$('.phone_number').each(function(){
    $(this).text(number.replace(new RegExp('(.+).{'+symbolsForHide+'}$'),"$1"+'...'));
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы