Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]JS toggle dla tego samego ID lub class, toggle dla kilku kontenerów
casperii
post 6.06.2018, 18:13:52
Post #1





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

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


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.
Go to the top of the page
+Quote Post
viking
post 6.06.2018, 18:29:04
Post #2





Grupa: Zarejestrowani
Postów: 4 858
Pomógł: 821
Dołączył: 30.08.2006

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


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


--------------------
Go to the top of the page
+Quote Post
casperii
post 6.06.2018, 18:31:26
Post #3





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

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


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
Go to the top of the page
+Quote Post
viking
post 6.06.2018, 20:05:04
Post #4





Grupa: Zarejestrowani
Postów: 4 858
Pomógł: 821
Dołączył: 30.08.2006

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


https://jsfiddle.net/ea3dxz5j/


--------------------
Go to the top of the page
+Quote Post
casperii
post 6.06.2018, 20:30:51
Post #5





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

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


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
Go to the top of the page
+Quote Post
viking
post 6.06.2018, 20:53:01
Post #6





Grupa: Zarejestrowani
Postów: 4 858
Pomógł: 821
Dołączył: 30.08.2006

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


A jquery umiesz osadzić? Script i takie sprawy.


--------------------
Go to the top of the page
+Quote Post
casperii
post 6.06.2018, 20:57:25
Post #7





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

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


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

Go to the top of the page
+Quote Post
Neutral
post 6.06.2018, 20:59:47
Post #8





Grupa: Zarejestrowani
Postów: 180
Pomógł: 24
Dołączył: 10.01.2016

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


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
Go to the top of the page
+Quote Post
casperii
post 12.06.2018, 20:08:03
Post #9





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

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


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


Ten post edytował casperii 12.06.2018, 20:09:15
Go to the top of the page
+Quote Post
Neutral
post 12.06.2018, 20:31:54
Post #10





Grupa: Zarejestrowani
Postów: 180
Pomógł: 24
Dołączył: 10.01.2016

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


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ć.
Go to the top of the page
+Quote Post
Neutral
post 12.06.2018, 21:38:37
Post #11





Grupa: Zarejestrowani
Postów: 180
Pomógł: 24
Dołączył: 10.01.2016

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


Skorzystaj z ostatniego skryptu z tej strony:
ForumWeb.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 22.06.2018 - 00:26