Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [JavaScript]Uogólnienie kodu

Napisany przez: lled3 14.03.2019, 23:55:30

Mam kod, pokazujący/ukrywający element:

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/style.html>
  2. .hide {
  3.   position: absolute !important;
  4.   top: -9999px !important;
  5.   left: -9999px !important;
  6. }
  7.  
  8. .this-will-not-be-read {
  9.   display: none !important;
  10. }
  11.  
  12. body {
  13.   padding: 50px;
  14. }
  15. </http://december.com/html/4/element/style.html>    
  16.  
  17. <http://december.com/html/4/element/button.html id="myButton">Toggle</http://december.com/html/4/element/button.html>
  18. <http://december.com/html/4/element/p.html id="myText">Pellentesque s t amet, wisi. Aene eros eu erat. ncidunt quis, metus</http://december.com/html/4/element/p.html>
[HTML] pobierz, plaintext


Kod
<script>
var   $button = $('#myButton');
var   $text   = $('#myText');
var  visible = true;      
  

$button.click(function()
{
if ( visible ) {
  $text.slideUp('fast',function(){
    $text.addClass('hide')
         .slideDown(0);
  });
} else {
  $text.slideUp(0,function(){
    $text.removeClass('hide')
         .slideDown('fast');
  });
}
visible = ! visible;
});</script>


</html>


Wszystko pięknie działa. Tylko jakim najlepszym sposobem uogólnić ten kod na dowolną ilość elementów

<button> oraz <p> ?

Mogę z id stworzyć tablicę, później wygenerować w JS taką samą tablicę zmiennych button, text, visible - ale na etapie generowania HTML muszę zadbać o nadanie unikalnych ID. Myślałem nad rozwiązaniem, by odczytać JS wszystkie elementy w klasie CSS i na tej podstawie stworzyć tablicę - ale jak się do niej odwołać?

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/button.html id="myButton[0]">Toggle</http://december.com/html/4/element/button.html>
  2. <http://december.com/html/4/element/p.html id="myText[0]">Pellentesque s t amet, wisi. Aene eros eu erat. ncidunt quis, metus</http://december.com/html/4/element/p.html>
  3. <http://december.com/html/4/element/button.html id="myButton[1]">Toggle</http://december.com/html/4/element/button.html>
  4. <http://december.com/html/4/element/p.html id="myText[1]">Pellentesque s t amet, wisi. Aene eros eu erat. ncidunt quis, metus</http://december.com/html/4/element/p.html>
  5.  
  6.  
  7. ....
  8.  
  9. <http://december.com/html/4/element/p.html id="myText[n]">Pellentesque s t amet, wisi. Aene eros eu erat. ncidunt quis, metus</http://december.com/html/4/element/p.html>
  10. <http://december.com/html/4/element/button.html id="myButton[n]">Toggle</http://december.com/html/4/element/button.html>
[HTML] pobierz, plaintext

Napisany przez: viking 15.03.2019, 07:55:32

Do czegoś takiego jak tutaj nawet nie potrzebujesz JS https://prophp.pl/advice/show/21/zaznaczanie_aktywnych_elementow_html_bez_uzycia_javascript

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)