Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [JavaScript][HTML]toggle show/hide

Napisany przez: casperii 11.09.2019, 17:42:23

Panowie przejdę do rzeczy mam kod (https://jsfiddle.net/Lzgrs428/):



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

Napisany przez: Neutral 11.09.2019, 21:45:34

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 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String.

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

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

Napisany przez: casperii 12.09.2019, 08:36:48

@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/

Napisany przez: Neutral 12.09.2019, 10:25:23

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. <http://december.com/html/4/element/body.html style="background: darkgoldenrod;">
  2.  
  3.  
  4. <http://december.com/html/4/element/p.html>
  5.   <http://december.com/html/4/element/div.html class="clicks">+</http://december.com/html/4/element/div.html>
  6.   <http://december.com/html/4/element/div.html class="hiddens">hidden</http://december.com/html/4/element/div.html>
  7. </http://december.com/html/4/element/p.html>
  8.  
  9. <http://december.com/html/4/element/p.html>
  10.   <http://december.com/html/4/element/div.html class="clicks">+</http://december.com/html/4/element/div.html>
  11.   <http://december.com/html/4/element/div.html class="hiddens">hidden</http://december.com/html/4/element/div.html>
  12. </http://december.com/html/4/element/p.html>
[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. </http://december.com/html/4/element/body.html>
[HTML] pobierz, plaintext

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