Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]Uogólnienie kodu
lled3
post 14.03.2019, 23:55:30
Post #1





Grupa: Zarejestrowani
Postów: 90
Pomógł: 0
Dołączył: 7.12.2007

Ostrzeżenie: (0%)
-----


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

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


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

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


Ten post edytował lled3 14.03.2019, 23:58:22
Go to the top of the page
+Quote Post
viking
post 15.03.2019, 07:55:32
Post #2





Grupa: Zarejestrowani
Postów: 5 089
Pomógł: 855
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


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


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 22.03.2019 - 16:18