Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [JavaScript]JS toggle dla tego samego ID lub class

Napisany przez: casperii 6.06.2018, 18:13:52

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.

Napisany przez: viking 6.06.2018, 18:29:04

id jest unikalne dla dokumentu. Zastosuj klasy albo numerację #id1

Napisany przez: casperii 6.06.2018, 18:31:26

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.

Napisany przez: viking 6.06.2018, 20:05:04

https://jsfiddle.net/ea3dxz5j/

Napisany przez: casperii 6.06.2018, 20:30:51

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

Napisany przez: viking 6.06.2018, 20:53:01

A jquery umiesz osadzić? Script i takie sprawy.

Napisany przez: casperii 6.06.2018, 20:57:25

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

Napisany przez: Neutral 6.06.2018, 20:59:47

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

Napisany przez: casperii 12.06.2018, 20:08:03

@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 
<http://december.com/html/4/element/div.html class="click">coś tam</http://december.com/html/4/element/div.html>
<http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html>
<http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html>
<http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html>
<http://december.com/html/4/element/div.html><http://december.com/html/4/element/div.html class="hide"></http://december.com/html/4/element/div.html></http://december.com/html/4/element/div.html>
[HTML] pobierz, plaintext

Napisany przez: Neutral 12.06.2018, 20:31:54

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

Napisany przez: Neutral 12.06.2018, 21:38:37

Skorzystaj z ostatniego skryptu z tej strony:
http://www.forumweb.pl/poczatkujacy-webmaster/przycisk-rozwijajacy-dalsza-czesc-tekstu,99568?highlight=.