[JS/CSS]Zamiania tekstu innym tekstem

pytanie zadane 6 listopada 2016 w JavaScript przez pigmej4ever Nowicjusz (190 p.)

Witam! Mam problem ostatnio zastanawiałem się jak wykorzystać funkcje CSS3 albo stworzyć skrypt JavaScript, który po kliknięciu w tekst zmieni go na inny, np.

Na stronie mam paragraf

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a justo imperdiet, pulvinar justo non, suscipit ante. Duis laoreet sit amet ante vitae vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eu turpis ac nulla sollicitudin congue. Nulla vitae ligula vel ex vehicula bibendum. In a mollis quam, at sagittis nibh. Maecenas venenatis dolor elit, eget sodales sapien ullamcorper eget. Vivamus semper porta feugiat.

Teraz użytkownik klika w tekst, a ten znika a w jego miejsce pojawia się nowy np. taki:

Phasellus sapien enim, facilisis ac nulla nec, vehicula rhoncus eros. Proin venenatis nibh a volutpat finibus. Donec non consectetur libero. Nulla vel libero nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla egestas lorem vel erat semper interdum. Vivamus cursus ligula vel nisi dictum, nec dapibus urna eleifend. Maecenas semper nibh eu dolor tincidunt blandit. Aliquam non tellus cursus, dignissim dui nec, elementum est.

Jakieś pomysły? Z góry dziękuje za odpowiedź.

Pozdrawiam,

2 odpowiedzi

odpowiedź 6 listopada 2016 przez Krzysztof Pawliczuk Obywatel (1,500 p.)
wybrane 6 listopada 2016 przez pigmej4ever

Najlepsza

możesz to zrobić prostym ajaxem w jquery ( metoda .load wystarczy)
oczywiście musi być załadowane jquery

przykład działania do wklejenia i uruchomienia:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#button_ajax").click(function(){
        $("#id_diva_w_ktorym_chesz_wyswietlic_cos_z_innego_diva").load("index.html #id_diva_z_ktorego_chcesz_pobrac_zawartosc");
    });
});
</script>
<style>
#container {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 600px;
}

#button_ajax {
cursor: pointer;
border: 1px solid;
background-color: green;
text-align: center;
}
</style>
</head>
<body>
<div id=container>
  <div id="button_ajax">kliknij tu!!</div>
  <div id="id_diva_w_ktorym_chesz_wyswietlic_cos_z_innego_diva"><h2>jestem lorem ipsum, który ma być zastąpiony</h2></div>
  <div style="visibility: hidden">
    <div id="id_diva_z_ktorego_chcesz_pobrac_zawartosc">
	  <h2>jestem treścią diva pobranym z diva o id: id_diva_z_ktorego_chcesz_pobrac_zawartosc</h2>
    </div>
  </div>
</div>	
</body>
</html>

komentarz 6 listopada 2016 przez pigmej4ever Nowicjusz (190 p.)

Boje się, że przykład nie działa

komentarz 6 listopada 2016 przez Krzysztof Pawliczuk Obywatel (1,500 p.)

to nie rozumiem czemu kliknąłeś, że odpowiedź jest najlepsza ^^ kliknij w czarny button w mojej odpowiedzi "CODEPEN" tam, będziesz mógł sprawdzić. utwórz na pulpicie plik o tej samej nazwie, do której odwołuje sie metoda .load (czyli index.html) wklej całą zawartość i odpal w przeglądarce. lokalnie testowane na firefox. na innych przeglądarkach może nie działać lokalnie. chyba, ze masz środowisko do testowania. używam tej metody na stronach i napewno działa na firefox, chrome, ie, edge.

odpowiedź 6 listopada 2016 przez dewe Gaduła (4,300 p.)

Do pierwszego tekstu dajesz ID np. "tekst".

W Javascript dodajesz event dla tego ID, czyli łapiesz element po ID i dodajesz event za pomoca addEventListener.

No i pozniej tworzysz funkcje ktora zmieni tekst na inny czyli ".innerHTML="tekstnowy";". Nie wiem czy sa lepsze rozwiazania bo sam sie dopiero ucze :P

komentarz 6 listopada 2016 przez pigmej4ever Nowicjusz (190 p.)
przeniesione 6 listopada 2016 przez Arkadiusz Waluk

@up

Teoretycznie zadziała, ale przejście między jednym tekstem a drugim będzie "twarde". Czy jest jakiś sposób, żeby najpierw tekst stopniowo zniknął, a potem się pojawił?