Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][HTML]toggle show/hide
casperii
post
Post #1





Grupa: Zarejestrowani
Postów: 681
Pomógł: 28
Dołączył: 14.08.2014

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

Panowie przejdę do rzeczy mam kod (online):



skrypt działa bez problemowo , chciałbym teraz edytować tekst tylko dla klikalnego ID by plusik zamienił się w " minusik "
Jeżeli to zmieniam w samym switchu to edytuje mi dla wszystkich , nie wiem jak tam przekazać to ID.
Ktoś podpowie ?

Na pewno jakoś w ten sposób :

Kod
$('[data-klika="' + ID + '"]').text('plusik');


Ten post edytował casperii 11.09.2019, 20:13:45
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Neutral
post
Post #2





Grupa: Zarejestrowani
Postów: 286
Pomógł: 46
Dołączył: 10.01.2016

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

Wprowadziłem Cię chyba w błąd, ponieważ w tym kontekście nieważne jest, czy napiszesz tak data-x="hello", czy tak data-x='hello'.

Proponuję, abyś zabrał się raczej do nauki czystego (pure) JavaScript, a nie z bibliotekami, dopóki nie opanujesz języka w stopniu zadawalającym.

Kod
.hiddens {
  display: none;
  box-shadow: 2px 4px 2px 4px grey;
}
.clicks {
  background: lightgreen;
  border: 2px outset green;
  display: inline-block;
  padding: 4px;
  min-width: 1em;
  min-height: 1em;
  text-align: center;
  user-select: none;
}


[HTML] pobierz, plaintext 
  1. <body style="background: darkgoldenrod;">
  2.  
  3.  
  4. <p>
  5.   <div class="clicks">+</div>
  6.   <div class="hiddens">hidden</div>
  7. </p>
  8.  
  9. <p>
  10.   <div class="clicks">+</div>
  11.   <div class="hiddens">hidden</div>
  12. </p>
[HTML] pobierz, plaintext


Kod
function toggle_el(e) {
  let clicks = document.querySelectorAll('.clicks');

  for(let i=0;i<clicks.length;i++) {
    let computed_style = window.getComputedStyle(document.querySelectorAll('.hiddens')[i]).getPropertyValue('display');
    if(clicks[i] === e.target && computed_style == 'none') {
       document.querySelectorAll('.hiddens')[i].style.display = 'block';
       clicks[i].style.background = 'pink';
       clicks[i].textContent = '-';
    } else if(clicks[i] === e.target && computed_style == 'block') {
       document.querySelectorAll('.hiddens')[i].style.display = 'none';
       clicks[i].style.background = 'lightgreen';
       clicks[i].textContent = '+';
    }
  }
}

document.addEventListener('click', toggle_el, false);


[HTML] pobierz, plaintext 
  1. </body>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post

Posty w temacie
- casperii   [JavaScript][HTML]toggle show/hide   11.09.2019, 17:42:23
- - Neutral   Nie wiem, czy taka składnia w JQuery jest dozwolon...   11.09.2019, 21:45:34
- - casperii   @Neutral wrzuciłem stary JS, obecny masz tutaj : h...   12.09.2019, 08:36:48
- - Neutral   Wprowadziłem Cię chyba w błąd, ponieważ w tym kont...   12.09.2019, 10:25:23

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 12.03.2026 - 23:05
Powered By IP.Board © 2026  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn