jQuery show()
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<button id="button1">Show it</button>
<p style="display: none">Hello 2</p>
<script>
$("button1").click(function () {
$("p").show("slow");
});
</script>
<p style="display: none">Hello 2</p>
<script>
$("button1").click(function () {
$("p").show("slow");
});
</script>
en dit wel:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<button>Show it</button>
<p style="display: none">Hello 2</p>
<script>
$("button").click(function () {
$("p").show("slow");
});
</script>
<p style="display: none">Hello 2</p>
<script>
$("button").click(function () {
$("p").show("slow");
});
</script>
Waarom? En hoe krijg ik voorbeeld 1 aan het werk zodat ik met meerdere buttons met een eigen ID kan werken?
Code (php)
1
$(document).ready(function(){
Want, de onderste regel werkt wel, zonder die code.
Groeten :)
Basiskennis jQuery...
Code (php)
1
2
2
$("#button").click(function () {
Als de knop vaker voorkomt, moet je een class gebruiken:
Code (php)
1
$(".button").click(function () {
Gewijzigd op 02/02/2011 10:35:26 door - Ariën -
$("button1")
moet zijn
$("#button1")
Als ik jou code erom heen zet Aar werkt het niet meer.
Nu wil ik echter dat button1 P1 opent, button2 P2, etc.
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
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<button id="button1">Show it 1</button>
<p id="p1" style="display: none">Hello 1</p>
<button id="button2">Show it 2 </button>
<p id="p2" style="display: none">Hello 2</p>
<button id="button3">Show it 3</button>
<p id="p3" style="display: none">Hello 3</p>
<script>
$("#button1").click(function () {
$("#p1").show("slow");
});
</script>
<button id="button1">Show it 1</button>
<p id="p1" style="display: none">Hello 1</p>
<button id="button2">Show it 2 </button>
<p id="p2" style="display: none">Hello 2</p>
<button id="button3">Show it 3</button>
<p id="p3" style="display: none">Hello 3</p>
<script>
$("#button1").click(function () {
$("#p1").show("slow");
});
</script>
Hoe verwerk ik daar nu in dat hij automatisch de verschillende buttons en P's pakt?
@Aar, kan het zijn omdat ik geen body etc erin heb staan dat het daarom niet werkt?
Chi Lion op 02/02/2011 10:41:11:
Wat bedoel je nou? Gewoon de code kopieren en 1 vervangen door 2 en 3???? Toch niet zo moeilijk?Hoe verwerk ik daar nu in dat hij automatisch de verschillende buttons en P's pakt?
Chi Lion op 02/02/2011 10:41:11:
Je hebt toch wel een body in je pagina staan neem ik aan?@Aar, kan het zijn omdat ik geen body etc erin heb staan dat het daarom niet werkt?
In feite zouden het oneindig veel buttons en oneindig veel P's kunnen zijn.
de ID's van button en P worden auto gegenereerd, alleen moet hij snappen dat het getal bij button ook het getal bij P wordt zeg maar.
Zo iets duidelijker?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<button>Show it 1</button>
<p style="display: none">Hello 1</p>
<button>Show it 2 </button>
<p style="display: none">Hello 2</p>
<button>Show it 3</button>
<p style="display: none">Hello 3</p>
<script type="text/javascript">
$("button").click(function () {
$(this).next('p').show("slow");
});
</script>
<p style="display: none">Hello 1</p>
<button>Show it 2 </button>
<p style="display: none">Hello 2</p>
<button>Show it 3</button>
<p style="display: none">Hello 3</p>
<script type="text/javascript">
$("button").click(function () {
$(this).next('p').show("slow");
});
</script>
Toevoeging op 02/02/2011 11:00:42:
Wacht, dat is me gelukt nu:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<button>Show it 1</button>
<p style="display: none">Hello 1</p>
<button>Show it 2 </button>
<p style="display: none">Hello 2</p>
<button>Show it 3</button>
<p style="display: none">Hello 3</p>
<script type="text/javascript">
$("button").click(function () {
$(this).next('p').show("slow");
$(this).prev('p').hide("slow");
});
</script>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<button>Show it 1</button>
<p style="display: none">Hello 1</p>
<button>Show it 2 </button>
<p style="display: none">Hello 2</p>
<button>Show it 3</button>
<p style="display: none">Hello 3</p>
<script type="text/javascript">
$("button").click(function () {
$(this).next('p').show("slow");
$(this).prev('p').hide("slow");
});
</script>
</body>
</html>
Maar waar gooi ik nu mijn document.ready in?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php for($i=1;$i<11;$i++) {
echo '<p id="p'.$i.'" style="display: none">Hello '.$i.'</p>';
echo '<a href="#" id="button '.$i.'">klik '.$i.'</a>;
}
<script type="text/javascript">
for($i=1;$i<11;$i++) {
?>
$("#button <?php echo $i; ?>").click(function () {
$("#p<?php echo $i; ?>").show("slow");
});
<?php
}
?>
</script>
echo '<p id="p'.$i.'" style="display: none">Hello '.$i.'</p>';
echo '<a href="#" id="button '.$i.'">klik '.$i.'</a>;
}
<script type="text/javascript">
for($i=1;$i<11;$i++) {
?>
$("#button <?php echo $i; ?>").click(function () {
$("#p<?php echo $i; ?>").show("slow");
});
<?php
}
?>
</script>
Gewijzigd op 02/02/2011 11:10:09 door Ozzie PHP
Jij enige idee waar ik Aar zijn document.ready in moet pleuren, aangezien je die zelf ook niet gebruikt...
Als je het netjes wilt doen plaats je JS in de head, zonder document.ready zal je op deze manier een foutmelding krijgen:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$('p').hide("slow");
$(this).next('p').show("slow");
});
});
</script>
</head>
<body>
<button>Show it 1</button>
<p style="display: none">Hello 1</p>
<button>Show it 2 </button>
<p style="display: none">Hello 2</p>
<button>Show it 3</button>
<p style="display: none">Hello 3</p>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$('p').hide("slow");
$(this).next('p').show("slow");
});
});
</script>
</head>
<body>
<button>Show it 1</button>
<p style="display: none">Hello 1</p>
<button>Show it 2 </button>
<p style="display: none">Hello 2</p>
<button>Show it 3</button>
<p style="display: none">Hello 3</p>
</body>
</html>
Gewijzigd op 02/02/2011 11:11:23 door Lauren Zonneveld
Gewijzigd op 02/02/2011 11:12:40 door Ozzie PHP
Bij Ozzie's script krijg je dus steeds maar weer dezelfde stuk code. Hier is al een opzet van hoe het beter kan, in principe kan het nog verder worden uitgewerkt.
(is <button> een normaal html element?)
Van die show() kan je toggle() maken. De methode eronder kan je dan weghalen.
Button is al minimaal vanaf html 4 aanwezig.
Ben het nog nooit tegengekomen... of anders gezegd, ik heb het nooit gebruikt.
http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict
Ja dus.