Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 12.07.2018, 13:54
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<Creative mode ON>

<style>
	img{
	position: relative;
	top: 0;
	left: -30px;
	}
</style>
	<span class="phone_number">+74951182647<span class="phone_number_active">Показать</span></span><br>
	<span class="phone_number">+74951182647<span class="phone_number_active">Показать</span></span>
	<script>
		[].forEach.call(document.querySelectorAll('.phone_number'),function(el){
			var btn = el.querySelector('.phone_number_active');
			btn.insertAdjacentHTML('beforebegin', '<img src="https://javascript.ru/forum/image.php?u=40601&dateline=1424365279" alt="" />');
			var img = el.querySelector('img');
			btn.onclick = e => img.style.display = 'none';
		});
</script>
Ответить с цитированием
  #22 (permalink)  
Старый 12.07.2018, 14:02
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<Creative mode ON>
<style>
	.phone_number{
	position: relative;
	display: block;
	text-align: right;
	top: 0;
	right: -40px;
	transition: 1s;
	}
</style>
	<span class="phone_number"><span class="phone_number_active">Показать</span>+74951182647</span><br>
	<span class="phone_number"><span class="phone_number_active">Показать</span>+74951182647</span>
	<script>
		[].forEach.call(document.querySelectorAll('.phone_number'),function(el){
			var btn = el.querySelector('.phone_number_active');
			btn.onclick = e => el.style.right = '0';
		});
</script>
Ответить с цитированием
  #23 (permalink)  
Старый 13.07.2018, 23:31
Аспирант
Отправить личное сообщение для Ermite Посмотреть профиль Найти все сообщения от Ermite
 
Регистрация: 20.10.2015
Сообщений: 32

Хотелось коротко, получилось как всегда)

<span class="phone_number">+74953332211<span class="phone_number_active"> Показать</span></span><br>
<span class="phone_number">+74953332011<span class="phone_number_active"> Показать</span></span>
<script>
(function() {
  const classNamePhone = 'span.phone_number';      
  const count = 4; // сколько чисел менять
  const hideText = "X".repeat(count); // каким символом менять
  
  document.querySelectorAll(classNamePhone).forEach((item) => {     
    replaceNumber(item);    
    item.lastChild.addEventListener("click", (e) => {
      const parent = e.target.parentElement;
      const fChild = parent.firstChild;
      if (!fChild.__hideNumber) {
        replaceNumber(e.target.parentElement);
        e.target.innerHTML = " Показать";
      } else {
        fChild.nodeValue = fChild.nodeValue.replace(hideText, fChild.__hideNumber);
        fChild.__hideNumber = false;
        e.target.innerHTML = " Скрыть";
      }
    });
  });  
  
  function replaceNumber(item) {
    const val = item.firstChild.nodeValue;
    item.firstChild.__hideNumber = val.substr(-count);
    item.firstChild.nodeValue = val.substr(0, val.length - count) + hideText;
  }
})();
</script>
Ответить с цитированием
  #24 (permalink)  
Старый 16.07.2018, 12:12
Интересующийся
Отправить личное сообщение для senex Посмотреть профиль Найти все сообщения от senex
 
Регистрация: 09.12.2014
Сообщений: 10

Мой ответ уже не актуален, но все же отвечу: в яваскрипт ковычки не могут находиться внутри других ковычек такого же типа. Если внешние ковычки одинарные, то внутри нужно ставить двойные, и наоборот. Или экранировать их обратным слэшем.

'<span class="phone_number_xxxx">xxxx</span>'
'<span class=\'phone_number_xxxx\'>xxxx</span>'


В отношении основного вопроса, то для задач "показать/скрыть" есть простое и практичное решение на чистом HTML/CSS - это связка <label> и скрытого checkbox:

<style>
.tel input, .tel input + span {display: none}
.tel input:checked ~ span {display: none}
.tel input:checked + span {display: inline}
</style>

<label class="tel">
    <input type="checkbox"/>
    99922<span>7777   Скрыть</span>
    <span>xxxx   Показать</span>
</label>


Если нужно, чтобы клик срабатывал только один раз, навешиваем на чекбокс простой обработчик:

<input type="checkbox" onchange="if (!this.checked) this.checked = true"/>

Последний раз редактировалось senex, 16.07.2018 в 12:14.
Ответить с цитированием
  #25 (permalink)  
Старый 16.07.2018, 12:23
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от senex
Мой ответ уже не актуален
Насчет кавычек - смотрите пост 14 в этой теме.
По основной части не столько не актуален, сколько не удовлетворяет условию - не менять html.

Последний раз редактировалось Dilettante_Pro, 16.07.2018 в 12:29.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как скрыть img, если src пустой? Gosha Ponomaryov Events/DOM/Window 7 23.01.2015 17:36
Как скрыть все DIV кроме заданного ID при клике? sibfox777 Элементы интерфейса 1 24.11.2014 18:16
Как айти часть слова и удалить её? neutron jQuery 6 15.02.2013 16:44
Как скрыть обработчик HTML-формы с помошью JavaScript? Мишаня Общие вопросы Javascript 5 15.06.2009 05:40
Подскажите как убрать часть текста при нажатии на кномпу или гиперссылку. potkin Общие вопросы Javascript 6 10.10.2008 07:55