Przycisk "Wyświetl numer"

Question

Witam, szukałem w necie i nie znalazłem, a siedzę nad tym od 2 godzin, ktoś wie w jaki sposób zrobić taki przycisk jak poniżej? (Numer jest schowany, pokazuje się kiedy klikniemy w przycisk)

przed:

po:

Answer 1

W najprostszej postaci byłby to przycisk, który po kliknięciu zmienia swoją zawartość, czyli addEventListener + podmiana textContent/innerHTML na nową treść.

Comments

Coś takiego: https://jsfiddle.net/Comandeer/b3kg9ro2/

Od razu podmieniłem przycisk na link do dzwonienia.

Żeby zrobić pełne wsparcie dla czytników ekranowych warto dorobić jeszcze obsługę klawiatury dla stanu "Pokaż numer" (bo przyciski powinny reagować też na spację, nie tylko enter).

---

Jak kod wyglądałby w jquery?

---

• document.querySelector → $
• addEventListener → one
• zmiana własności href i role → prop
• textContent → text

---

@Comandeer może od razu tutaj napiszę, żeby tematu nowego nie robić, mam problem z tym, a mianowicie:
 

Mam stronę, szablon kupiony jakiś czas temu, (superstoryfinder), i chcę, aby wyświetlał mi się taki właśnie przycisk, już tłumaczę w czym problem, kiedy wyszukuję jakiś sklep, lista wygląda następująco:

 

w html do wyświetlania tej listy mam zrobione 

<ol style="display: block; " id="list"></ol>

w JS jest tak:

$("<li id='l_"+marker['__gm_id']+"' class='clinic_list'>")
	.html("<span class='number'>"+number+"</span><div><strong>"+v.name+"</strong><br /><span>"+v.address+"</span><div id='numb_phone' style='width: 130px; line-height: 20px; float: right;'><a href='www.google.pl'>Pokaż numer</a></div><div id=d_"+number+" class='distance'><span>"+distancenode+"</span> <span class='units'></span> <span class='time2'></span></div></div><div class='products'>"+ctype+"</div><a id='la_"+marker['__gm_id']+"' name='la_"+marker['__gm_id']+"'></a>")
	.click(function(){
		//displayPoint(marker, i);
		infowindow.setContent(info_window_string);
		infowindow.open(map,marker);
		toggleBounce(marker);
		var currentLatLng = new google.maps.LatLng(v.lat,v.lng);
		map.setCenter(currentLatLng);
										
		})
		.appendTo("#list");

Nie wiem jak to zrobić, ale za każdym razem jak kliknę w "Pokaż numer" strona przewija się na samą górę i pokazuje to miejsce na mapie zamiast wyświetlić numer.

Podpinam też link do strony, aby można było zobaczyć jak działa i na czym to polega.
link

---

Do tego, co ja mam, spróbuj dodać po evt.preventDefault() evt.stopPropagation(). Dzięki temu po kliknięciu w link nie powinna się odpalić funkcja dla całego elementu listy.

Ogólnie to, co tutaj się dzieje, to tzw. bąbelkowanie zdarzeń.

---

do tego kodu co wyżej wstawiłem chciałem przerobić to na jquery, bo nie działały mi inne funkcje, czy w taki sposób jest to dobrze przerobione?

 

$( '#revealNumber' ).one( 'click', ( evt ) => {
	evt.preventDefault();
evt.stopPropagation()
	const { target: link } = evt;

	link.prop('');
	link.prop('tel:+48000000000');
	link.text('000-000-000');
}, { once: true } );

 

---

@comandeer odpala się funkcja dla całego elementu ale funkcja nie od ciebie tylko ta co wysłałem wyżej (ta co już była na stronie)

---

Hmm, w takim wypadku kombinowałbym raczej w inną stronę, coś może typu:

$("<li id='l_"+marker['__gm_id']+"' class='clinic_list'>")
.html("<span class='number'>"+number+"</span><div><strong>"+v.name+"</strong><br /><span>"+v.address+"</span><div id='numb_phone' style='width: 130px; line-height: 20px; float: right;'><a href='#' class=\"reveal-number\" role=\"button\">Pokaż numer</a></div><div id=d_"+number+" class='distance'><span>"+distancenode+"</span> <span class='units'></span> <span class='time2'></span></div></div><div class='products'>"+ctype+"</div><a id='la_"+marker['__gm_id']+"' name='la_"+marker['__gm_id']+"'></a>")
.click(function( { target } ){
	$target = $( target );

	if ( $target.is( '.reveal-number:not(.revealed)' ) ) {
		$target.prop( 'role', '' );
		$target.prop( 'href', 'tel:+48000000000' );
		$target.text( '000-000-000' );
		$target.addClass( 'revealed' );

		return;
	}

	infowindow.setContent(info_window_string);
	infowindow.open(map,marker);
	toggleBounce(marker);
	var currentLatLng = new google.maps.LatLng(v.lat,v.lng);
	map.setCenter(currentLatLng);			
})
	.appendTo("#list");

Pisane z palca, więc nie wiem, czy działa.

---

O kurcze, faktycznie działa!, tylko w dalszym ciągu przewija mi stronę do góry 

---

$("<li id='l_"+marker['__gm_id']+"' class='clinic_list'>")
.html("<span class='number'>"+number+"</span><div><strong>"+v.name+"</strong><br /><span>"+v.address+"</span><div id='numb_phone' style='width: 130px; line-height: 20px; float: right;'><a href='#' class=\"reveal-number\" role=\"button\">Pokaż numer</a></div><div id=d_"+number+" class='distance'><span>"+distancenode+"</span> <span class='units'></span> <span class='time2'></span></div></div><div class='products'>"+ctype+"</div><a id='la_"+marker['__gm_id']+"' name='la_"+marker['__gm_id']+"'></a>")
.click(function( { target } ){
    $target = $( target );
	
    if ( $target.is( '.reveal-number:not(.revealed)' ) ) {
        $target.prop( 'role', '' );
        $target.prop( 'href', 'tel:+48000000000' );
        $target.text( '000-000-000' );
        $target.addClass( 'revealed' );
	}
	
	if ( $target.is( '.reveal-number' ) ) {
		evt.preventDefault();
		evt.stopPropagation();
		return;
	}
 
    infowindow.setContent(info_window_string);
    infowindow.open(map,marker);
    toggleBounce(marker);
    var currentLatLng = new google.maps.LatLng(v.lat,v.lng);
    map.setCenter(currentLatLng);           
})
    .appendTo("#list");

A taka wersja?

---

Działa jak natura chciała, Dzięki!! :D

---

@comandeer, Ostatni raz tyłek zawrócę, w jaki sposób przerobić to, aby przy 1 kliknięciu pokazało numer, a dopiero za 2 razem (Jak już numer będzie wyświetlony) przekierowywało do dzwonienia?

---

Hmm, prawdę mówiąc to powinno działać.

---

Teraz przy pierwszym kliknięciu zanim pokaże numer przekierowuje do dzwonienia, a powinno dopiero jak numer będzie pokazany

---

Możesz to pokazać online?

---

http://motoradar.pl/, w wyszukiwarce wpisz Olkusz, tam będą przykładowe sklepy i obok przyciski

 

---

Prawdę mówiąc nie wiem, czemu nie działa… Ale można spróbować zmodyfikować ten kod, np:

$("<li id='l_"+marker['__gm_id']+"' class='clinic_list'>")
.html("<span class='number'>"+number+"</span><div><strong>"+v.name+"</strong><br /><span>"+v.address+"</span><div id='numb_phone' style='width: 130px; line-height: 20px; float: right;'><a href='#' class=\"reveal-number\" role=\"button\">Pokaż numer</a></div><div id=d_"+number+" class='distance'><span>"+distancenode+"</span> <span class='units'></span> <span class='time2'></span></div></div><div class='products'>"+ctype+"</div><a id='la_"+marker['__gm_id']+"' name='la_"+marker['__gm_id']+"'></a>")
.click(function(){
    infowindow.setContent(info_window_string);
    infowindow.open(map,marker);
    toggleBounce(marker);
    var currentLatLng = new google.maps.LatLng(v.lat,v.lng);
    map.setCenter(currentLatLng);           
}).appendTo("#list").find( '.reveal-number', ( evt ) => {
	var $target = $( evt.target );
	
	evt.stopPropagation();
	
	if ( !$target.hasClass( 'revealed' ) ) {
		evt.preventDefault();

		$target.prop( 'role', '' );
        $target.prop( 'href', 'tel:+48000000000' );
        $target.text( '000-000-000' );
		$target.addClass( 'revealed' );
	}
})

 

---

Dziwne

---

@Comandeer, Ten kod chyba nie działa 

---

$("<li id='l_"+marker['__gm_id']+"' class='clinic_list'>")
.html("<span class='number'>"+number+"</span><div><strong>"+v.name+"</strong><br /><span>"+v.address+"</span><div id='numb_phone' style='width: 130px; line-height: 20px; float: right;'><a href='#' class=\"reveal-number\" role=\"button\">Pokaż numer</a></div><div id=d_"+number+" class='distance'><span>"+distancenode+"</span> <span class='units'></span> <span class='time2'></span></div></div><div class='products'>"+ctype+"</div><a id='la_"+marker['__gm_id']+"' name='la_"+marker['__gm_id']+"'></a>")
.click(function(){
    infowindow.setContent(info_window_string);
    infowindow.open(map,marker);
    toggleBounce(marker);
    var currentLatLng = new google.maps.LatLng(v.lat,v.lng);
    map.setCenter(currentLatLng);           
}).appendTo("#list").find( '.reveal-number' ).on( 'click', ( evt ) => {
    var $target = $( evt.target );
     
    evt.stopPropagation();
     
    if ( !$target.hasClass( 'revealed' ) ) {
        evt.preventDefault();
 
        $target.prop( 'role', '' );
        $target.prop( 'href', 'tel:+48000000000' );
        $target.text( '000-000-000' );
        $target.addClass( 'revealed' );
    }
})

Fakt, wkradł się babol.

 

---

No co ci mam więcej napisać, Dziwne jak by po twojej pomocy coś nie działało, Dzięki! Zamykam

Answer 2

Ja nadałbym divovi onklicka, i za pomocą jQ zmienił klasę na taką, zawierającą numer, lub zmienił wartość diva za pomocą inner HTML (tu bez JQ)

Edit: podaję te drugie rozwiązanie poniżej:

<!DOCTYPE html>
<html>
<head>
	<title>test</title>

</head>
<body>


<div id="nr" onclick="funkcja()">Numer telefonu</div>


<script type="text/javascript">
	function funkcja() {

document.getElementById('nr').innerHTML = "123 456 789"
	}

</script>



</body>
</html>

 

Comments

W jaki sposób klasa może zawierać numer?

---

Dałoby się chyba pokombinować z "content"

---

Tak, ale wyłącznie pod warunkiem, że treść byłaby wstawiana przy pomocy pseudoelementu, co sprawia, że tak wstawionego numeru nie dałoby się zaznaczyć.

---

Dlatego właśnie wspomniałem jeszcze o możliwości z innerHTML

---

Zamieniłem sobie to na jquery 
 

function funkcja() {
$('#nr').text('Hello world'); 
}

Ale dalej mam ten sam problem co wyżej opisałem (po naciśnięciu strona wraca na samą górę i nic się nie dzieje z tym przyciskiem)