Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]JS toggle dla tego samego ID lub class
Forum PHP.pl > Forum > Przedszkole
casperii
Panowie czy jest wykonalne utworzenie toggle dla tego samego ID lub class ?
chodzi o to , że w pętli mam rekordy do którego chce przypisać ID / class

  1. $(document).ready(function () {
  2. $('#click').click(function(){
  3. $('.show').toggle();
  4. e.preventDefault();
  5. });
  6. });


Załóżmy że poniżej wyświetliłem z bazy:
<div id="click">Gienek</div>
<div class="show" style="display:none;">Gienek jest fajnym gościem, który lubi pomagać innym.</div>

<div id="click">Franek</div>
<div class="show" style="display:none;">Franek też jest fajny, ale nie lubi już pomagać innym.</div>

<div id="click">Zbyszek</div>
<div class="show" style="display:none;">Zbyszek to tajemniczy gość. </div>

Każde kliknięcie w "kolejny" kontener chowa ten poprzedni kontener.

Jak to rozbudować ? Dodaj , że powyższa funkcja JS działa tylko dla pierwszego kontenera.
viking
id jest unikalne dla dokumentu. Zastosuj klasy albo numerację #id1
casperii
a czy klasa może być taka sama dla każdego kontenera ?
Bo póki co jeśli kliknięcie w którykolwiek kontener rozwija mi wszystkie kontenery, ponowne kliknięcie zamyka mi wszystkie kontenery, a jak zrobić by to się tyczyło tylko tego przy którym klikam.
viking
https://jsfiddle.net/ea3dxz5j/
casperii
coś u mnie nie działa:
Uncaught TypeError: $(...).on is not a function

próbowałem osadzić skrypt w

  1. (function($){
  2. //script
  3. })(jQuery);


i dalej to samo
viking
A jquery umiesz osadzić? Script i takie sprawy.
casperii
nie rozumiem pytania.

Skoro to działa:
  1. $(document).ready(function () {
  2. $('.click').click(function(){
  3.  
  4. $('.show').toggle();
  5. e.preventDefault();
  6. });
  7. });


to rodzi się pytanie czemu to nie działa :
  1. $(document).ready(function () {
  2. $('.click').on('click', function(e) {
  3. e.preventDefault();
  4. $(this).next().toggle();
  5. });
  6. });

Neutral
Kod
body {
    background:grey;
}
div:nth-child(2n+1) {
    border:1px solid orange;
    display:inline-block;
}
div {
    cursor:pointer;
}
.hide {
    display:none;
}


Kod
<div class="click">Gienek</div>
<div class="hide">Gienek jest fajnym gościem, który lubi pomagać innym.</div>

<div class="click">Franek</div>
<div class="hide">Franek też jest fajny, ale nie lubi już pomagać innym.</div>

<div class="click">Zbyszek</div>
<div class="hide">Zbyszek to tajemniczy gość. </div>


Kod
function my_toggle(e) {
    
    var click = document.querySelectorAll('.click');

    if(e.target.className==='click') {
        
        var my_hide = document.querySelectorAll('.click');
        var arr = Array.from(my_hide);
        var index_c = (arr.indexOf(e.target));
        var something = document.querySelectorAll('.click + .hide')[index_c];
        
        if(something.style.display=='block') {
            something.style.display = 'none';
        }else {
            something.style.display = 'block'
        }
        
    }
    
}

document.addEventListener('click',my_toggle,false);
casperii
@Neutral konsola nic nie wywala ale działanie skryptu nie działa.
Może wina dla tego , że struktura htmla wygląda tak:

  1. <div class="click">coś tam</div>
  2. <div></div>
  3. <div></div>
  4. <div></div>
  5. <div><div class="hide"></div></div>
Neutral
Jeśli .hide będzie pod .click, to tylko zmień to:

Kod
var something = document.querySelectorAll('.click + .hide')[index_c];


na to:

Kod
var something = document.querySelectorAll('.click ~ .hide')[index_c];


. Wyrzuć dodatkowo tamten CSS, bo nie będzie dobrze działać.
Neutral
Skorzystaj z ostatniego skryptu z tej strony:
ForumWeb.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.