De PHPhulp kroeg
PHP en Jquery vraagje
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
29
30
31
32
33
34
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
29
30
31
32
33
34
<?
<div class="photobox">
[code]<?
foreach($tweets as $tweet)
{
?>
<div class="photo">
<div class="test">
<div class="tweettextbox" style="display:none;">
<? echo $tweet->author;?><br/><? echo $tweet->content; ?>
</div>
<div class="tweetphoto">
<a href="#" title="<? echo $tweet->author;?>"> <img src="<? echo $tweet->avatar; ?>" width="81" height="81" border="0px"></a>
</div>
</div>
</div>
<?
}
?>
</div>
<script>
$(".test").click(function () {
$(".tweettextbox").show("fast");
$(".tweetphoto").hide("fast");
});
$(".sidebar").click(function () {
$(".tweettextbox").hide("fast");
$(".tweetphoto").show("fast");
});
</script>
?>
<div class="photobox">
[code]<?
foreach($tweets as $tweet)
{
?>
<div class="photo">
<div class="test">
<div class="tweettextbox" style="display:none;">
<? echo $tweet->author;?><br/><? echo $tweet->content; ?>
</div>
<div class="tweetphoto">
<a href="#" title="<? echo $tweet->author;?>"> <img src="<? echo $tweet->avatar; ?>" width="81" height="81" border="0px"></a>
</div>
</div>
</div>
<?
}
?>
</div>
<script>
$(".test").click(function () {
$(".tweettextbox").show("fast");
$(".tweetphoto").hide("fast");
});
$(".sidebar").click(function () {
$(".tweettextbox").hide("fast");
$(".tweetphoto").show("fast");
});
</script>
?>
Gewijzigd op 26/09/2012 12:08:09 door Marco Hendriks
De selector werkt zoals die van css.
$(".tweetphoto").hide("fast");
zal als resultaat hebben (na de overgang):
.tweetphoto {
display: none;
}
Dat geldt dus inderdaad voor alles met class="tweetphoto".
----
Als je enkel het element wil aanspreken waarop geklikt is, heb je this ter beschikking.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$(".test").click(function () {
// this = <div class="test"> . Maar dan enkel deze waarop geklikt is.
// $(this).find(".tweettextbox") = binnen de geselecteerde <div class="test"> zoekt jQuery naar <div class="tweettextbox">
// dus ...
$(this).find(".tweettextbox").show("fast");
$(this).find(".tweetphoto").hide("fast");
});
// this = <div class="test"> . Maar dan enkel deze waarop geklikt is.
// $(this).find(".tweettextbox") = binnen de geselecteerde <div class="test"> zoekt jQuery naar <div class="tweettextbox">
// dus ...
$(this).find(".tweettextbox").show("fast");
$(this).find(".tweetphoto").hide("fast");
});
Maar probeer het zelf eens uit; ik heb het niet getest.
Gewijzigd op 26/09/2012 13:31:56 door Kris Peeters
Toevoeging op 26/09/2012 13:44:28:
Net uit geprobeerd en works like a charm stom van me dat ik daar zelf niet aan gedacht heb.