• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
331 wizyt
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,060 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 (251,170 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

+1 głos
odpowiedź 11 czerwca 2020 przez VBService Ekspert (251,170 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 (251,170 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.

komentarz 12 czerwca 2020 przez Bakkit Dyskutant (7,600 p.)
Nie chodziło mi w 100% o to co napisałeś, ale faktycznie pomogłeś. Dzięki.
+1 głos
odpowiedź 12 czerwca 2020 przez pablop76 VIP (123,060 p.)

Zapewne Twój problem to asynchroniczność. Poczytaj o tym i zmień ten kod na czysty javascript, pochwal się wynikiem ;)

Podobne pytania

0 głosów
1 odpowiedź 1,368 wizyt
pytanie zadane 24 stycznia 2018 w HTML i CSS przez Nocomentor Początkujący (250 p.)
0 głosów
3 odpowiedzi 3,222 wizyt
pytanie zadane 31 października 2015 w HTML i CSS przez Filip31411 Dyskutant (8,820 p.)
0 głosów
1 odpowiedź 327 wizyt
pytanie zadane 22 lipca 2018 w HTML i CSS przez mibi Nowicjusz (220 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...