Przycisk "Wyświetl numer"

pytanie zadane 6 lipca 2020 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)
zamknięte 9 lipca 2020 przez Hardwell

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:

komentarz zamknięcia: Comandeer rozwiązał, dzień jak co dzień :D

2 odpowiedzi

odpowiedź 6 lipca 2020 przez Comandeer Guru (601,590 p.)
wybrane 7 lipca 2020 przez Hardwell

Najlepsza

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

Pokaż 16 poprzednich komentarzy

komentarz 9 lipca 2020 przez Comandeer Guru (601,590 p.)

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' );
	}
})

komentarz 9 lipca 2020 przez Hardwell Dyskutant (8,980 p.)

Dziwne

komentarz 9 lipca 2020 przez Hardwell Dyskutant (8,980 p.)

@Comandeer, Ten kod chyba nie działa

komentarz 9 lipca 2020 przez Comandeer Guru (601,590 p.)

$("<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.

komentarz 9 lipca 2020 przez Hardwell Dyskutant (8,980 p.)

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

odpowiedź 6 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
edycja 6 lipca 2020 przez _Pita_

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>

komentarz 6 lipca 2020 przez Comandeer Guru (601,590 p.)

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

komentarz 6 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

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

komentarz 6 lipca 2020 przez Comandeer Guru (601,590 p.)

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ć.

komentarz 6 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

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

komentarz 7 lipca 2020 przez Hardwell Dyskutant (8,980 p.)

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)

Podobne pytania

0 głosów

3 odpowiedzi 325 wizyt

Brak HTML w "Wyświetl źródło strony"

pytanie zadane 4 marca 2020 w HTML i CSS przez KamQiX Dyskutant (9,090 p.)

0 głosów

1 odpowiedź 112 wizyt

Javascript, po zakończeniu video wyświetl alert.

pytanie zadane 16 lutego 2017 w JavaScript przez Vorex444 Dyskutant (9,610 p.)

0 głosów

1 odpowiedź 198 wizyt

e.target jego numer w tablicy

pytanie zadane 26 listopada 2017 w JavaScript przez Vorex444 Dyskutant (9,610 p.)

Przycisk "Wyświetl numer"

Zaloguj lub zarejestruj się, aby skomentować.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci