Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript][HTML]toggle show/hide
casperii
post 11.09.2019, 17:42:23
Post #1





Grupa: Zarejestrowani
Postów: 605
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
Neutral
post 11.09.2019, 21:45:34
Post #2





Grupa: Zarejestrowani
Postów: 252
Pomógł: 38
Dołączył: 10.01.2016

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


Nie wiem, czy taka składnia w JQuery jest dozwolona, co Ty zaprezentowałeś z tym cudzysłowem w środku.

Poczytaj po co są w ogóle stosowane w programowaniu znaki cudzysłowia i apostrofu, bo widzę, że chyba nie do końca rozumiesz - lektura do poczytania (MDN).

Ogólnie, to napisz jaki dostajesz błąd, ponieważ u mnie ten błąd chyba nie występuje.

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


Ten post edytował Neutral 11.09.2019, 21:49:57
Go to the top of the page
+Quote Post
casperii
post 12.09.2019, 08:36:48
Post #3





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

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


@Neutral wrzuciłem stary JS, obecny masz tutaj : https://jsfiddle.net/jze9v4gp/
błędów nie rzuca, chodzi o to jak do zmiennej "one" wrzucić ten ID który był klikalny.

Dobra temat nieaktualny, gdyby ktoś szukał rozwiązania to: https://jsfiddle.net/jze9v4gp/2/

Ten post edytował casperii 12.09.2019, 09:14:42
Go to the top of the page
+Quote Post
Neutral
post 12.09.2019, 10:25:23
Post #4





Grupa: Zarejestrowani
Postów: 252
Pomógł: 38
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;
}


  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>


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);


  1. </body>
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: 16.10.2019 - 11:11