Tijden veranderen
[jquery] td toggelen werkt niet
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<tr>
<td><a href="/spots/4007">4007</a></td>
<td><a onclick="toon_opmerking('4007');" class="OpmToggle4007" href="javascript:void(0)">Klik</a></td>
</tr>
<tr class="opm4007" style="display:none">
<td colspan="6"><b>Opmerking:</b> Prototype modernisering driedelige treinstellen.</td>
</tr>
<td><a href="/spots/4007">4007</a></td>
<td><a onclick="toon_opmerking('4007');" class="OpmToggle4007" href="javascript:void(0)">Klik</a></td>
</tr>
<tr class="opm4007" style="display:none">
<td colspan="6"><b>Opmerking:</b> Prototype modernisering driedelige treinstellen.</td>
</tr>
script.js:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
function toon_opmerking(nummer) {
$(document).ready(function(){
$(.OpmToggle).click(function() {
$('.opm'+nummer).toggle();
});
});
}
$(document).ready(function(){
$(.OpmToggle).click(function() {
$('.opm'+nummer).toggle();
});
});
}
De foutmelding van de errorconsole zegt:
toon_opmerking is not defined
En ja, jQuery wordt geladen. De functie bestaat..
Waar slaat dit dan op?
Gewijzigd op 29/05/2011 21:10:19 door - Ariën -
Die HTML herhaalt zich meerdere keren, dus hij moet wel de juiste opmerking togglen. Dus leek een functie mij voor de hand liggend.
Gewijzigd op 29/05/2011 21:22:40 door - Ariën -
Stel je tabel heeft als ID 'toggletabel':
Code (php)
1
2
3
4
5
2
3
4
5
$(document).ready(function() {
$('#toggletabel td').click(function() {
$(this).toggle();
});
});
$('#toggletabel td').click(function() {
$(this).toggle();
});
});
Echter durf ik zo niet te zeggen hoe het gaat reageren met een TD.
Onclick events instellen in je HTML is compleet overbodig. Als je een event het op een object, dan staat 'this' voor het element waar het event door getriggered is.
Als je 100 TD's hebt en je drukt op een enkele TD, dan staat 'this' voor de exacte TD waar je op gedrukt hebt.
Gewijzigd op 29/05/2011 21:32:07 door Erik van de Locht
Kijk maar eens goed in mijn HTML voorbeeld.
Dus die 'this' gaat niet werken.
Zodra je op de td klikt voert hij deze code uit:
Code (php)
1
2
3
4
5
2
3
4
5
$(document).ready(function(){
$(.OpmToggle).click(function() {
$('.opm'+nummer).toggle();
});
});
$(.OpmToggle).click(function() {
$('.opm'+nummer).toggle();
});
});
Maar dit is al een goede code opzich. Alleen deze code volstaat al, want met $(document).ready() kijk je of de DOM klaar is. Vervolgens selecteer je .OpmToggle (moet trouwens wel tussen quotes). Dan zeg je als er op dit geklikt wordt, voer deze functie uit. En die functie is dat .opm+nummer getoggled wordt, dit is trouwens een anchor (link) niet de td.
Je kan inderdaad veel beter gebruik maken van this, daarmee pak je het element dat geselecteerd wordt. In de code die jij gebruikt zal de juiste code dit zijn:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<tr>
<td><a href="/spots/4007">4007</a></td>
<td><a class="OpmToggle4007" href="javascript:void(0)">Klik</a></td>
</tr>
<tr class="opm4007" style="display:none">
<td colspan="6"><b>Opmerking:</b> Prototype modernisering driedelige treinstellen.</td>
</tr>
<script type="text/javascript">
$(function() { // Verkorting van $(document).ready(
// Selecteer elke td en zodra er op geklikt wordt
$('td').click(function() {
// Laat je dat element togglen
$('this').toggle();
});
});
</script>
<td><a href="/spots/4007">4007</a></td>
<td><a class="OpmToggle4007" href="javascript:void(0)">Klik</a></td>
</tr>
<tr class="opm4007" style="display:none">
<td colspan="6"><b>Opmerking:</b> Prototype modernisering driedelige treinstellen.</td>
</tr>
<script type="text/javascript">
$(function() { // Verkorting van $(document).ready(
// Selecteer elke td en zodra er op geklikt wordt
$('td').click(function() {
// Laat je dat element togglen
$('this').toggle();
});
});
</script>
Quote:
Je kan inderdaad veel beter gebruik maken van this, daarmee pak je het element dat geselecteerd wordt. In de code die jij gebruikt zal de juiste code dit zijn:
Lees je wel? Er zijn twee TR's, eentje met de knop, en eentje met de opmerking....
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$(function() {
$('a').click(function() {
var anchorClass = $(this).attr('class');
$('td.'+anchorClass).toggle();
});
});
$('a').click(function() {
var anchorClass = $(this).attr('class');
$('td.'+anchorClass).toggle();
});
});
Of gebruik maken van de jQuery functie next():
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$(function() {
$('a').click(function() {
$(this).next('tr').children('td').toggle();
});
});
$('a').click(function() {
$(this).next('tr').children('td').toggle();
});
});
Maar wat jij wilt, kan je dat niet veel beter met de HTML tags dl, dd en dt oplossen? (link).
Leuk.
Next was ik ook even vergeten, maar dan kan het zelfs super simpel:
Code (php)
1
2
3
2
3
$('tr.row').click(function(){
$(this).next().toggle();
});
$(this).next().toggle();
});
(mijn clickable tr heb ik class row meegegeven)
Gewijzigd op 29/05/2011 23:41:58 door - Roland -
Code (php)
1
$(this).next('tr').children('tr').toggle();
En ook dit niet:
Code (php)
1
$(this).next('tr').toggle();
d.m.v. console.log() weet ik wel dat het hierin zit.
Hij pakt toch echt de volgende tr, die heeft de "display:none" stijl.
Maar er gebeurt wederom niks.
dan werkt ie
<table width="200" border="1">
<tr class="row" >
<td>Aap</td>
<td> </td>
</tr>
<tr style="display:none">
<td>opmerking</td>
<td> </td>
</tr>
<tr class="row" >
<td>Mies</td>
<td> </td>
</tr>
<tr style="display:none">
<td>opmerking</td>
<td> </td>
</tr>
</table>
oja, ik had 2 kolommen, maar dat is niet van belang...
Gewijzigd op 29/05/2011 23:59:30 door - Roland -
Zoiets:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<tr>
<td><a href="/spots/4007">4007</a></td>
<td id="4007"><a class="click" href="#">Klik</a></td>
</tr>
<tr class="opm4007" style="display:none">
<td colspan="6"><b>Opmerking:</b> Prototype modernisering driedelige treinstellen.</td>
</tr>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.click').click(function() {
var id = $(this).attr('id');
$('.opm'+id).toggle();
return false;
});
});
</script>
<td><a href="/spots/4007">4007</a></td>
<td id="4007"><a class="click" href="#">Klik</a></td>
</tr>
<tr class="opm4007" style="display:none">
<td colspan="6"><b>Opmerking:</b> Prototype modernisering driedelige treinstellen.</td>
</tr>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.click').click(function() {
var id = $(this).attr('id');
$('.opm'+id).toggle();
return false;
});
});
</script>
Gewijzigd op 30/05/2011 00:01:46 door Tim S
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$(function(){
$('a.opmtoggle').click(function(){
$(this).parents('tr').next().toggle();
return false;
});
});
$('a.opmtoggle').click(function(){
$(this).parents('tr').next().toggle();
return false;
});
});
(Op mn mobiel getypt dus de opmaak is niet geweldig)
Gewijzigd op 30/05/2011 12:16:09 door Arjan -
Thnx...
Maar mooi dat het nu werkt!