[JavaScript]Uogólnienie kodu Opcje

[lled3]

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

[HTML] pobierz, plaintext 
<style>
.hide {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}
 
.this-will-not-be-read {
  display: none !important;
}
 
body {
  padding: 50px;
}
</style>    
 
<button id="myButton">Toggle</button>
<p id="myText">Pellentesque s t amet, wisi. Aene eros eu erat. ncidunt quis, metus</p>
[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 
<button id="myButton[0]">Toggle</button>
<p id="myText[0]">Pellentesque s t amet, wisi. Aene eros eu erat. ncidunt quis, metus</p>
<button id="myButton[1]">Toggle</button>
<p id="myText[1]">Pellentesque s t amet, wisi. Aene eros eu erat. ncidunt quis, metus</p>
 
 
....
 
<p id="myText[n]">Pellentesque s t amet, wisi. Aene eros eu erat. ncidunt quis, metus</p>
<button id="myButton[n]">Toggle</button>
[HTML] pobierz, plaintext 

Ten post edytował lled3 14.03.2019, 23:58:22

[viking]

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