jquery: Заменить телефон вида “+79106563211” на номер “+7910…11”

217

02 мая 2017, 06:24

Есть список телефонных номеров по 12 символов:

<div class='tel'>+79106563211</div> 
<div class='tel'>+79106563212</div> 
<div class='tel'>+79106563213</div>

Задачи:

При загрузке страницы нужно заменить в них символы с 6 по 10 на точки, вот так: "+7910.....11"

Я сделал так:

		$('document').ready(function(){ 
			var text = $('.tel').text(); 
			var text_1 = text.substr(0,3); // подстрока 1 
			var text_2 = text.substr(-2,2); // подстрока 2 
			 
			var mascText = text_1+'........'+text_2; // формирование маски 
			 
			$('.tel').hide(); // скрыть телефон 
			$('.tel').parent().append('<div class="masc"></div>'); 
			$('.tel').parent().find('.masc').html(mascText); // помещение маски в новый div 
		})

Но тогда во все div class="masc" добавляется последний телефонный номер с div class="tel", а мне нужно, каждый div.masc содержал свой уникальный номер

При клике по классу 'tel' подставлять вместо номера с точками полный номер, вот так: "+79106563211"

Я сделал так:

$('.masc').click(function(){ // при клике по маске 
  $('.tel').hide(); // скрыть все телефоны 
  $('.masc').show(); // показать все маски 
  $(this).hide(); // скрыть текущую маску 
  $(this).parent().find('.tel').show(); // показать текущий телефон  
})

Работает правильно.

Подскажите варианты решения моей задачи, пожалуйста.

Answer 1

Как вариант записать телефон в атрибут, например data-tel. При загрузке поменять текст на короткий номер и при клике менять текст на тот что в атрибуте.

$('.tel').each(function(elem) { 
  var text_1 = $(this).data('tel').substr(0,5); // подстрока 1 
  var text_2 = $(this).data('tel').substr(-2,2); // подстрока 2 
  $(this).text(text_1 + '...' + text_2); 
}); 
 
$('.tel').click(function() { 
  $(this).html($(this).data('tel')); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class='tel' data-tel='+79106563211'></div> 
<div class='tel' data-tel='+79106563211'></div> 
<div class='tel' data-tel='+79106563211'></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Перевод с MS SQL на mysql через Migration Wizard

Использую Migration Wizard в Workbench что бы перенести БД на mysqlНастройки для Source Selection :

261

MySQL

SQL запрос из двух таблиц [дубликат]

На данный вопрос уже ответили:

271

MySQL

Удаление дублей в БД

Всем приветЗнаю, что тема заезженная, но решить поставленную задачу не смог

260

Java

отправка почты с андроида без клиента (Sending Emails without User Intervention (no Intents) in Android)

Нашел много примеров по теме (Sending Emails without User Intervention (no Intents) in Android) с отправкой сообщения на почту анонимно с сотового из своего приложения...

272