Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

jQuery show() (Opgelost)

Chilion - 03/02/2011 16:13

MySQL interesse

Dames en Heren,

Ik heb een index.php waar ik het volgende script in de head heb staan:

javascript code - Bekijk de code zonder highlighting - Klap code in

                 $(document).ready(function(){
            $('.FAQ_Vraag').click(function () {
                $('.FAQ_Antwoord').hide("slow");
                $(this).next('.FAQ_Antwoord').show("slow");
            });
        });
            
$(document).ready(function(){
            $('.FAQ_Vraag').click(function () {
                $('.FAQ_Antwoord').hide("slow");
                $(this).next('.FAQ_Antwoord').show("slow");
            });
        });
 

Een andere pagina die ik include heeft deze code:

php code - Bekijk de code zonder highlighting - Klap code in


<?php

class FAQ
{
	public $content;
	public $page;
	
	function __construct()
	{
		$this->page		= (isset($_GET['page']) ? $_GET['page'] : 'home');
		$this->step();
	}
	
	function step()
	{
		$sql 	= 'SELECT * FROM faq ORDER BY rang, id';
		$result = mysql_query($sql);
			
			$this->content = '<table>';
			
			while ($row = mysql_fetch_assoc($result))
			{
				$this->content .= '	<tr>
										<td><a class="FAQ_Vraag" ><b>'.ucfirst($row['title']).'</b></a></td>
									</tr>
									<tr>
										<td><p class="FAQ_Antwoord" style="display: none;" ><i>'.$row['answer'].'</i></p></td>
									</tr>
									<tr>
										<td>&nbsp;</td>
									</tr>';
			}
			
			$this->content .= '</table>'; 
	}
}
?>

<?php
 
class FAQ
{
	public $content;
	public $page;
 
	function __construct()
	{
		$this->page		= (isset($_GET['page']) ? $_GET['page'] : 'home');
		$this->step();
	}
 
	function step()
	{
		$sql 	= 'SELECT * FROM faq ORDER BY rang, id';
		$result = mysql_query($sql);
 
			$this->content = '<table>';
 
			while ($row = mysql_fetch_assoc($result))
			{
				$this->content .= '	<tr>
										<td><a class="FAQ_Vraag" ><b>'.ucfirst($row['title']).'</b></a></td>
									</tr>
									<tr>
										<td><p class="FAQ_Antwoord" style="display: none;" ><i>'.$row['answer'].'</i></p></td>
									</tr>
									<tr>
										<td>&nbsp;</td>
									</tr>';
			}
 
			$this->content .= '</table>'; 
	}
}
?>

De (relevante) code die gegenereert wordt als ik in de browser "bron weergeven" doe is dit:

html4strict code - Bekijk de code zonder highlighting - Klap code in


<div class="content"> 				

<table>	
<tr>										<td>
  <a class="FAQ_Vraag" ><b>De facturen werden altijd automatisch geincasseerd;   Nu niet meer. Hoe kan dat ?</b></a></td>

</tr>
<tr>
    <td><p class="FAQ_Antwoord" style="display: none;" ><i> Blablabla</i></p> </td>
</tr>
</table>

<div class="content"> 				
 
<table>	
<tr>										<td>
  <a class="FAQ_Vraag" ><b>De facturen werden altijd automatisch geincasseerd;   Nu niet meer. Hoe kan dat ?</b></a></td>
 
</tr>
<tr>
    <td><p class="FAQ_Antwoord" style="display: none;" ><i> Blablabla</i></p> </td>
</tr>
</table>

Nu is de bedoeling dat wanneer men op <a class="FAQ_Vraag"> klikt, <p class="FAQ_Antwoord"> zichtbaar wordt. Dat werkt nu echter niet.
Hoe kan dat?

6 antwoorden

Gesponsorde links

Realtec - 03/02/2011 16:17 (laatste wijziging 03/02/2011 16:20)
HTML interesse		Ik ben dan niet zon pro in js maar ik denk dat je beter id kan pakken dan class in die link. Een class kan vaker gebruikt worden en een id is uniek. zoals dit: <a href"#FAQ_<vraag>"> Edit: Maar dan kom je wel met een probleem te zitten met je functie want dan zul je voor elke vraag een functie moeten schrijven :/

Chilion - 03/02/2011 16:19
MySQL interesse		ehm, dat zou dan mijns inzien <a id="#FAQ_Vraag"> worden. Daarnaast, er worden meer gemaakt dan 1 zoals je kunt zien in mijn PHP bestand, en dan is een classe beter heb ik altijd geleerd.

Beirensg - 03/02/2011 16:34
HTML beginner		het probleem zit hier: javascript code - Bekijk de code zonder highlighting - Klap code in $(this).next('.FAQ_Antwoord').show("slow"); $(this).next('.FAQ_Antwoord').show("slow"); immers $('.FAQ_Antwoord') staat in de DOM niet op hetzelfde niveau van $('.FAQ_Vraag') (lees in dezelfde cel!) Je kan best deze code vervangen door javascript code - Bekijk de code zonder highlighting - Klap code in $(this).parent('td').parent('tr').next('tr').find('p.FAQ_Antwoord').show("slow"); $(this).parent('td').parent('tr').next('tr').find('p.FAQ_Antwoord').show("slow"); Dit zou moeten werken (als ik geen foutje heb gemaakt natuurlijk )
Bedankt door: Chilion

Chilion - 03/02/2011 16:41
MySQL interesse		Dat klopt inderdaad en het werkt, kun je me dat iets meer uitleggen?

Beirensg - 03/02/2011 16:48
HTML beginner		Next selecteert eigenlijk siblings van het element (hier is dat $('a.FAQ_Vraag')). Siblings zijn elementen van hetzelfde type (dus a) in dezelfde container, hier de cel (td) waarin de vraag staat. Je structuur van de html komt hier niet mee overeen. Je moet eerst de rij waarin de vraag staat vinden:$(this).parent('td').parent('tr') En hiervan neem je de next rij (is het volgende element van hetzelfde type (tr) in dezelfde container (tabel)). Dit is de rij met het antwoord. Nu doe ik een simpele find in deze rij om het antwoord te vinden en te tonen. Ik geef eerlijk toe, in het begin dat ik JQuery gebruikte moest ik soms ook ver zoeken. Maar oefening baart kunst, en ik moet zeggen dat het heel logisch ineenzit.
Bedankt door: Chilion

Chilion - 03/02/2011 16:49
MySQL interesse		Ja oke, nu snap ik het tenminste ook. Bedankt!

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten