Zmiana treści spana przy najechaniu na diva i powrót do jego wartości przy zjeździe myszki

pytanie zadane 11 czerwca 2020 w JavaScript przez Bakkit Dyskutant (7,600 p.)
zamknięte 12 czerwca 2020 przez Bakkit

Witam. Na mojej stronie jest <div> a w tym divie <span> z tekstem. Chciałbym, aby po najechaniu na diva tekst w spanie się zmieniał, a przy zjeździe myszki z diva powracał do swojej pierwotnej wartości.

Problem jest tu: zawartość spana nie jest stała - jest ona wczytywana z bazy danych, więc najlepiej zapisać zapisać zawartość do zmiennej, zmienić wartość i potem przywrócić ją dzięki zmiennej. Pytanie tylko jak to zrobić? W internecie nie natknąłem się na podobne problemy. Z góry dziękuję za pomoc.

komentarz zamknięcia: Rozwiązanie problemu.

komentarz 11 czerwca 2020 przez pablop76 VIP (123,180 p.)

A skąd ma być zmieniona wartość?

komentarz 11 czerwca 2020 przez Bakkit Dyskutant (7,600 p.)

Byle jaka

komentarz 11 czerwca 2020 przez VBService Ekspert (253,420 p.)
edycja 11 czerwca 2020 przez VBService

@Bakkit, A co można użyć czysty javascript, czy jquery, czy css?

Sam css: on-line

komentarz 12 czerwca 2020 przez Bakkit Dyskutant (7,600 p.)

Byle czego, chcę tylko zmienić treść spana...

2 odpowiedzi

odpowiedź 11 czerwca 2020 przez VBService Ekspert (253,420 p.)
wybrane 12 czerwca 2020 przez Bakkit

Najlepsza

Sam css: przykład on-line


<div>
   <span id="t_span_1">Lore impuss...1</span>
   <span id="t_span_2">Dore impuss lor ...2</span>
</div>

<style>
div {
  border: 1px solid black;
  width: 150px;
}
div:hover #t_span_1 {
  display: none;
}
div:hover #t_span_2 {
  display: block;
  font-weight: bold;
  color: red;
}
#t_span_1 {
  display: block;
}
#t_span_2 {
  display: none;
}
</style>

komentarz 12 czerwca 2020 przez Bakkit Dyskutant (7,600 p.)

Nie bez powodu dałem post w dziale javascript. Gdyby to było takie proste uwierz, że bym nie chciał zajmować nikomu cennego czasu. Chodzi mi o ZMIANĘ TREŚCI spana, a nie utworzenie nowego.

komentarz 12 czerwca 2020 przez VBService Ekspert (253,420 p.)
edycja 12 czerwca 2020 przez VBService

Uruchomiłeś w ogóle ten kod i sprawdziłeś jak to działa. W pierwszym span'ie są dane, które są widoczne po załadowaniu strony. Drugi span jest nie widoczny na stronie, służy tylko jako kontener do zapisania danych, które mają się pojawić po najechaniu myszką na diva. Po zjechaniu myszki pojawiają się dane z pierwszego spana, czyli te widoczne zaraz po załadowaniu strony. W tym konkretnym przypadku nie trzeba ...

najlepiej zapisać zapisać zawartość do zmiennej, zmienić wartość i potem przywrócić ją dzięki zmiennej.

... tworzyć, żadnych zmiennych żeby zapamiętywać wartości, tą "zmienną" do zapamiętania wartości jest zawartość niewidzialnego spana i nie trzeba używać, żadnego dodatkowego kodu javascript do obsługi zdarzenia onmouseover na div, robi to mechanizm wbudowany w css'a (pseudo-klasa hover). Dane może tworzyć np.: skrypt php, tak np.:

<?php
 .....
 .....
?>
<body>
 .....
 .....
<?
$t_span_1 = "Lore impuss...1";
$t_span_2 = "Dore impuss lor ...2";
?>

<div>
   <span id="t_span_1"><?=$t_span_1?></span>
   <span id="t_span_2" style="display:none"><?=$t_span_2?></span>

    można zamiast 2-go span'a użyć <input type="hidden">

   <span id="t_span_1"><?=$t_span_1?></span>
   <input type="hidden" id="t_span_2" name="t_span_2" value='"<?=$t_span_2?>"'>"

</div>

</body>
</html>

Drugi sposób przykładowy. To użycie np.: jquery. ( on-line )


<div id="dane1" m_over="Dore impuss lor ...2">
   <span id="t_span_1">Lore impuss...1</span>
</div>

<script>
 $('#dane1').hover(function(){
   var dane1 = $('#t_span_1', this).html();
   var dane2 = $(this).attr('m_over');
   
   $(this).attr('m_over', dane1);
   $('#t_span_1', this).html(dane2);
 });
</script>

Trzeci można w podobny sposób użyć czysty javascipt. (Jak ktoś nie lubi jquery)

Czwarty sposób można dane pobierać z serwera dynamicznie za pomocą ajax'a, itd.