Hallo leden van sitedeals.nl,
Dit is mijn eerste post en ik ben ook nog nieuw in de wereld van javascript en jquery. Graag zou ik jullie hulp willen .
Simpel gezegd probeer ik 4 divs te maken bv rood, groen, blauw, geel. En elke div heeft een paragraaf die uitleg geeft over de div.
Wat ik wil maken is als je op de div klikt moet de bijbehorende paragraaf geopend worden dmv jquery of javascript.
Ik heb al wat geschreven maar als ik op een div klik dan gaan alle paragrafen open.
Dit is de code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="di, 27 dec 2011 18:49:47 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>test</title>
<style type="text/css">
div {
width:100px;
height:100px;
margin:10px;
text-align:center;
border:1px solid black;
float:left;
}
.red {
background-color:red;
}
.blue {
background-color:blue;
}
.green {
background-color:green;
}
.yellow {
background-color:yellow;
}
p {
border:1px solid black;
width:200px;
clear:both;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="red flip">Red box</div>
<div class="blue flip">Blue box</div>
<div class="green flip">Green box</div>
<div class="yellow flip">Yellow box</div>
<p class="flip panel">Description of div 1 red</p>
<p class="flip panel">Description of div 2 blue</p>
<p class="flip panel">Description of div 3 green</p>
<p class="flip panel">Description of div 4 yellow</p>
</body>
</html>
Graag zou ik even uitleg willen hebben hoe je dit kunt oplossen met javascript en een voorbeeld hoe je het met jquery kunt doen.
Dit zou mij enorm op weg helpen!! Alvast heel erg bedankt.
- jQuery-javascript --> een paragraaf openen behorend bij een div???
-
27-12-2011, 21:21 #1Particulier
- Berichten
- 5
- Lid sinds
- 13 Jaar
jQuery-javascript --> een paragraaf openen behorend bij een div???
Laatst aangepast door U. Kurt : 27-12-2011 om 21:33
-
27-12-2011, 21:47 #2
- Berichten
- 660
- Lid sinds
- 17 Jaar
Re: jQuery-javascript --> een paragraaf openen behorend bij een div???
Iets dergelijks zou je kunnen doen:
$(document).ready(function(){
// Eerst alle sluiten
$(".panel").hide();
$(".flip").click(function(){
$(".panel."+$(this).attr('class').split(' ')[0]).slideToggle("slow");
});
});
<p class="red panel">Description of div 1 red</p>
<p class="blue panel">Description of div 2 blue</p>
<p class="green panel">Description of div 3 green</p>
<p class="yellow panel">Description of div 4 yellow</p>
-
27-12-2011, 21:59 #3Particulier
- Berichten
- 5
- Lid sinds
- 13 Jaar
Re: jQuery-javascript --> een paragraaf openen behorend bij een div???
Zou je kort deze regel kunnen toelichten : $(".panel."+$(this).attr('class').split(' ')[0]).slideToggle("slow");
Verder wou ik je vragen, waar heb jij je javascript/jquery kennis van?
Ik heb w3schools gelezen en wil van sitepoint "JQUERY: NOVICE TO NINJA" lezen.
Is er nog iets dat je mij zou kunnen aanbevelen zoals tutorials of boeken of websites?
-
27-12-2011, 22:08 #4
- Berichten
- 660
- Lid sinds
- 17 Jaar
Re: jQuery-javascript --> een paragraaf openen behorend bij een div???
Beste Kurt,
Als eerste een korte toelichting:
De regel "$(".flip").click(function(){" voert hetgeen tussen de aanhalingstekens uit op het moment dat er op één van de divisons met de class flip wordt geklikt. Tussen de aanhalingstekens kan je het element waar op geklikt is behandelen met $(this). Van dit element waar op geklikt is haal ik de class op. Omdat het class atribuut bestaat als "red panel" en ik alleen red wil weten haal ik door middel val split alleen de red op. De [0] zorgt er voor dat ik red krijg, had ik [1] gedaan kreeg ik panel terug (waar ik niets aan had).
Mijn ervaring is ook begonnen bij w3schools, maar ik had al wel diverse programmeertalen goed onder de knie. Daarna heb ik diverse uitdagende applicaties ontwikkeld met jQuery ter oefening (bijvoorbeeld vexion.nl/croptool)
Dankjewel Lodewijk, dat is een hele goede oplossing.
Zou je kort deze regel kunnen toelichten : $(".panel."+$(this).attr('class').split(' ')[0]).slideToggle("slow");
Verder wou ik je vragen, waar heb jij je javascript/jquery kennis van?
Ik heb w3schools gelezen en wil van sitepoint "JQUERY: NOVICE TO NINJA" lezen.
Is er nog iets dat je mij zou kunnen aanbevelen zoals tutorials of boeken of websites?
-
29-12-2011, 04:23 #5Particulier
- Berichten
- 5
- Lid sinds
- 13 Jaar
Re: jQuery-javascript --> een paragraaf openen behorend bij een div???
Ik heb verder gewerkt met het stukje jQuery die jij had geschreven.
Met de bedoeling dat als je op rode box klikt dat rode panel open gaat, en als je daarna op groene box klikt rode dicht gaat en groene opent. Dit lukt wel.
Maar het probleem ontstaat dat als ik op rode box heb geklikt en rode paneel is open, dat als ik daarna weer op de rode paneel of box klik de paneel weer open gaat terwijl het nu dicht zou moeten gaan.
En dat lukt dus niet.
Code:$(document).ready(function(){ // Eerst alle sluiten $(".panel").hide(); $(".flip").click(function(){ if (".panel:visible"!=".panel."+$(this).attr('class').split(' ')[0]){ $(".panel").hide()}; $(".panel."+$(this).attr('class').split(' ')[0]).slideToggle("slow"); }); });
Wat doe ik hier verkeerd? Schrijf ik de vergelijking fout op??
-
29-12-2011, 17:09 #6
- Berichten
- 660
- Lid sinds
- 17 Jaar
Re: jQuery-javascript --> een paragraaf openen behorend bij een div???
Wat je doet is niet valide omdat ".panel:visible" nog geen selector is, $(".panel":visible") zou wel het element ophalen. Punt is dat je dan (theoretisch) meerdere elementen zou kunnen ophalen.
Een iets andere methode die wel werkt:
$(document).ready(function(){
// Eerst alle sluiten
$(".panel").hide();
$(".flip").click(function(){
// Opslaan van element dat geopend moet worden
var te_openen = $(".panel."+$(this).attr('class').split(' ')[0]);
if(!te_openen.is(":visible")){
// Element is nog niet openen, dus openen, eerst eventuele andere sluiten
$(".panel").hide();
te_openen.slideToggle("slow");
}
});
});
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic