Hide/Show met jQuery maar dan dynamisch
Ik heb een 30 tal keer dit:
Code (php)
1
2
3
2
3
$ver_id = 22; // wisselend vanuit database... duhu!
echo '<input type="button" value="'.$naam.'" name="wisselknop_verid_'.$ver_id.'"><br>';
echo '<div class="wissel" id="div_verid_'.$ver_id.'" style="display: none;">';
echo '<input type="button" value="'.$naam.'" name="wisselknop_verid_'.$ver_id.'"><br>';
echo '<div class="wissel" id="div_verid_'.$ver_id.'" style="display: none;">';
Nu wil ik, dat als je op de <INPUT> klikt, alle div.wissel inklappen en daarna div#ver_id_22 (of een ander nummer) wel weer wordt opengeklapt dmv display: block;
Maar hoe geef ik jQuery aan dat hij naar het ID van de input moet kijken en met dat ID de div daarvan moet openen?
jQuery:
Code (php)
1
2
3
4
2
3
4
$('.wisselknop').click(function(){
$('div#div_verid_'+intval(this.id).toggle();
});
$('div#div_verid_'+intval(this.id).toggle();
});
Kan iemand mij helpen?
Gewijzigd op 06/06/2012 20:55:17 door Eddy E
$('div#div_verid_'+$(this).attr('id')).toggle();
(de intval heb ik weggelaten, omdat een id volgens mij officieel helemaal geen getal mag zijn)
Toevoeging op 06/06/2012 21:16:54:
maar.... heeft je button wel dat getal als id? Je button heeft zo te zien helemaal geen id.
Ik heb het inmiddels voor elkaar met deze code.:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// cms vakken verbergen op 1 na
$(document).ready(function()
{
$('.wisselknop').click(function()
{
var str = $(this).attr("name");
var pattern = /[0-9]+/g;
var verid = str.match(pattern);
var elem = "div#div_verid_";
elem = elem + verid;
$('div.wissel').css("display","none");
$(elem).css("display","block");
});
});
$(document).ready(function()
{
$('.wisselknop').click(function()
{
var str = $(this).attr("name");
var pattern = /[0-9]+/g;
var verid = str.match(pattern);
var elem = "div#div_verid_";
elem = elem + verid;
$('div.wissel').css("display","none");
$(elem).css("display","block");
});
});
Als het beter (korter/ sneller) kan: graag!
Code (php)
Code (php)
1
2
3
4
2
3
4
$('input').live('click', function() { // Set een klik op alle inputs
$('.wissel').hide(); // verberg alle .wissel divs
$('#' + $(this).attr('name')).show(); // Toon de .wissel div die bij de input hoord.
});
$('.wissel').hide(); // verberg alle .wissel divs
$('#' + $(this).attr('name')).show(); // Toon de .wissel div die bij de input hoord.
});
PS hoe kom je eigenlijk bij .wisselknop :S die zie ik nergens in je input staan?
Gewijzigd op 06/06/2012 21:53:34 door Joakim Broden
Maar dit werkt niet:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// cms vakken verbergen op 1 na
$(document).ready(function()
{
$('.wisselknop').click(function()
{
// verkrijg de naam met het vereniging_id erin
var str = $(this).attr("name");
var pattern = /[0-9]+/g;
var verid = str.match(pattern);
var elem = "div#div_verid_";
elem = elem + verid;
// zet alle blokjes dicht
$('div.wissel').css("display","none");
// zet het geklikte blok open of dicht
if( $(elem).css("display") == "none")
{
$(elem).css("display","block");
alert("none");
}
else
{
$(elem).css("display","none");
alert("block");
}
});
});
$(document).ready(function()
{
$('.wisselknop').click(function()
{
// verkrijg de naam met het vereniging_id erin
var str = $(this).attr("name");
var pattern = /[0-9]+/g;
var verid = str.match(pattern);
var elem = "div#div_verid_";
elem = elem + verid;
// zet alle blokjes dicht
$('div.wissel').css("display","none");
// zet het geklikte blok open of dicht
if( $(elem).css("display") == "none")
{
$(elem).css("display","block");
alert("none");
}
else
{
$(elem).css("display","none");
alert("block");
}
});
});
Herhaald blijven klikken levert steeds NONE op, terwijl ik de <div> wel ziet (en de display dus op "block" staat)
Waarom met css dislay gaan kutten als je .hide() .show() hebt? Wiel nog een keer uitvinden?
En de NAME is ook uniek.
Ik heb nu:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// cms vakken verbergen op 1 na
$(document).ready(function()
{
$('.wisselknop').click(function()
{
// verkrijg de naam met het vereniging_id erin
var str = $(this).attr("name");
var pattern = /[0-9]+/g;
var verid = str.match(pattern);
var elem = "div#div_verid_";
elem = elem + verid;
// zet alle blokjes dicht
$('div.wissel').css("display","none");
// zet het geklikte blok open of dicht
if( $(elem).css("display") == "none")
{
$(elem).show();
}
else
{
$(elem).hide();
}
});
});
$(document).ready(function()
{
$('.wisselknop').click(function()
{
// verkrijg de naam met het vereniging_id erin
var str = $(this).attr("name");
var pattern = /[0-9]+/g;
var verid = str.match(pattern);
var elem = "div#div_verid_";
elem = elem + verid;
// zet alle blokjes dicht
$('div.wissel').css("display","none");
// zet het geklikte blok open of dicht
if( $(elem).css("display") == "none")
{
$(elem).show();
}
else
{
$(elem).hide();
}
});
});
En dat werkt.
Enige wat nog niet werkt... als ik op een SHOWed knop klik, moet hij ook verbergen.
Maar dat lukt dus (nog niet).
Eddy Erkelens op 06/06/2012 21:29:37:
Als het beter (korter/ sneller) kan: graag!
Uhm, ja, als je gewoon zorgt dat de id van de div direct af te leiden is uit de id van de knop dan heb je het hele stuk met de regex niet nodig. Lijkt me een stuk efficienter.
Eddy Erkelens op 06/06/2012 21:44:09:
Geen idee. Jouw code werkt niet direct. Dat zit hem waarschijnlijk in het feit dat NAME != ID!
En de NAME is ook uniek.
En de NAME is ook uniek.
Ik geef je een voorbeeld die werkt. Heb je er wel na gekeken , blijkbaar niet goed. En als het niet zou werken waarom probeer je er dan niet achter te komen waarom het niet werkt? Probeer het dan werkend te krijgen en val niet gelijk terug op je oude code.
Eddy Erkelens op 06/06/2012 21:48:36:
Dat is het, maar een ID moet toch uniek zijn en kan dus niet 2x gebruikt worden? Met name idem dito... toch?
En wat betreft ID moet inderdaad uniek zijn en name ook. Maar bij het zelfde attribute. Dus Je mag best name="test1" en id="test1" zijn...
Gewijzigd op 06/06/2012 22:01:16 door Joakim Broden
Maar het inklappen van een (enig) uitgeklapt ding werkt nog niet.
Ik heb 30 knoppen: druk op nummer 5 sluit allen (zijn ze standaard al) en opent 5.
Als ik daarna druk op 20, sluit alles (dus ook 5) en opent gelijk 20. Prima.
Maar als nu 20 open staat, en ik druk weer op 20, wil ik dat alles gesloten wordt EN BLIJFT. Dus ook nummer 20 zelf.
Met $('#' + $(this).is("visible") wilde ik kijken of hij open stond of niet, maar die blijft altijd false teruggeven (ook als hij wel zichtbaar is).
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// cms vakken verbergen op 1 na
$(document).ready(function()
{
$('.wisselknop').live('click', function() { // Set een klik op alle inputs
$('.wissel').hide(); // verberg alle .wissel divs
$('#' + $(this).attr('name')).show(); // Toon de .wissel div die bij de input hoort.
});
});
$(document).ready(function()
{
$('.wisselknop').live('click', function() { // Set een klik op alle inputs
$('.wissel').hide(); // verberg alle .wissel divs
$('#' + $(this).attr('name')).show(); // Toon de .wissel div die bij de input hoort.
});
});
Code (php)
1
2
3
4
5
2
3
4
5
$('input').live('click', function() { // Set een klik op alle inputs
$('#' + $(this).attr('name')).toggle(); // Toggle de .wissel div die bij de input hoord.
$('.wissel:not(#' + $(this).attr('name') + ')').hide(); // verberg alle .wissel divs
});
$('#' + $(this).attr('name')).toggle(); // Toggle de .wissel div die bij de input hoord.
$('.wissel:not(#' + $(this).attr('name') + ')').hide(); // verberg alle .wissel divs
});
Eddy Erkelens op 06/06/2012 21:48:36:
Dat is het, maar een ID moet toch uniek zijn en kan dus niet 2x gebruikt worden? Met name idem dito... toch?
Klopt. Dus als je de knop bijvoorbeeld #test1 geeft als id en de div #div_test1 als id, dan kan je heel eenvoudig de div vinden op basis van de knop id.
Toevoeging op 06/06/2012 22:22:48:
Eddy Erkelens op 06/06/2012 22:01:36:
Maar als nu 20 open staat, en ik druk weer op 20, wil ik dat alles gesloten wordt EN BLIJFT. Dus ook nummer 20 zelf.
Gewoon geen toggle gebruiken, maar show en hide. Ik gebruik nooit toggle omdat je dan altijd van dit soort rare dingen krijgt.
Erwin H op 06/06/2012 22:20:53:
Gewoon geen toggle gebruiken, maar show en hide. Ik gebruik nooit toggle omdat je dan altijd van dit soort rare dingen krijgt.
Juist wel, toggle() is vet handig. Dus als je iets in en uit wilt laten klappen gebruik jij hide() en show() en dan eerst nog kijken of een div zichtbaar is of niet? Das toch juis onhandig, meer type werk, meer tekst, meer bytes, meer dataverkeer, website langzamer etc.
Aan de hand van mijn voorbeeld zie je hoe je toggle() kunt gebruiken ;-)
Gewijzigd op 06/06/2012 22:38:42 door Joakim Broden
Ziet er redelijk uit en hopelijk gaat het goed werken.
Hertog Jan op 06/06/2012 22:26:14:
Juist wel, toggle() is vet handig. Dus als je iets in en uit wilt laten klappen gebruik jij hide() en show() en dan eerst nog kijken of een div zichtbaar is of niet? Das toch juis onhandig, meer type werk, meer tekst, meer bytes, meer dataverkeer, website langzamer etc.
Aan de hand van mijn voorbeeld zie je hoe je toggle() kunt gebruiken ;-)
Aan de hand van mijn voorbeeld zie je hoe je toggle() kunt gebruiken ;-)
ALLEEN als je ook echt wil togglen. Wat de TS wil is dat eigenlijk niet. Als hij op de knopt klikt wil hij dat altijd alle divs ingeklapt worden en die ene (die bij de knop hoort) uitgeklapt. Als je dan toggle gebruikt klap je die ene div de ene keer uit en de volgende keer in. Dat wil hij (zoals ik het lees) niet. In dat geval is het derhalve verstandiger om hide/show te gebruiken. Als je namelijk show gebruikt terwijl de div al zichtbaar is dan is er niets aan de hand.
Toevoeging op 07/06/2012 19:54:29:
Ik zeg net tegen mijn (bevallige) vrouw dat ik geweldig ben omdat het zo goed ben.
Maar eigenlijk komt Hertog Jan de eer toe.
Dus... neem ik maar een Hertogje! Bedankt. Werkt perfect.