[JavaScript]JS toggle dla tego samego ID lub class, toggle dla kilku kontenerów Opcje

[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

[HTML] pobierz, plaintext 
$(document).ready(function () {
		$('#click').click(function(){
			$('.show').toggle();
			e.preventDefault();
		});
});
[HTML] pobierz, plaintext 

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.

Ten post edytował casperii 6.06.2018, 18:41:15

[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

[HTML] pobierz, plaintext 
(function($){
    //script
})(jQuery);
[HTML] pobierz, plaintext 

i dalej to samo

[viking]

A jquery umiesz osadzić? Script i takie sprawy.

[casperii]

nie rozumiem pytania.

Skoro to działa:

[HTML] pobierz, plaintext 
$(document).ready(function () {
		$('.click').click(function(){
 
			$('.show').toggle();
			e.preventDefault();
		});
});
[HTML] pobierz, plaintext 

to rodzi się pytanie czemu to nie działa :

[HTML] pobierz, plaintext 
$(document).ready(function () {
$('.click').on('click', function(e) {
	e.preventDefault();
    $(this).next().toggle();
});
});
[HTML] pobierz, plaintext 

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

Ten post edytował Neutral 6.06.2018, 21:03:08

[casperii]

@Neutral konsola nic nie wywala ale działanie skryptu nie działa.
Może wina dla tego , że struktura htmla wygląda tak:

[HTML] pobierz, plaintext 
<div class="click">coś tam</div>
<div></div>
<div></div>
<div></div>
<div><div class="hide"></div></div>
[HTML] pobierz, plaintext 

Ten post edytował casperii 12.06.2018, 20:09:15

[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.