hide een div, show ander div na klik op afbeelding binnen li
Wat ik graag zou willen is dat als je klikt op het duimpje, dat die verdwijnt en er in plaats daarvan een berichtje verschijnt met een bedankje.
Heb daarvoor onderstaande css-code:
Code (php)
1
2
2
.beoordeling{ float : left; }
.beoordeeld { display : none; }
.beoordeeld { display : none; }
Voor elke foto in de galerij wordt onderstaande code aangemaakt:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<li>
<img src="Image00006.jpg" alt="Image00006.jpg" />
<div class="beoordeling">
<input type="image" src="thumbs-up_klein.png" onClick="UpdateRecord(6)"> 1x beoordeeld
</div>
<div class="beoordeeld">Dank voor uw compliment!</div>
</li>
<img src="Image00006.jpg" alt="Image00006.jpg" />
<div class="beoordeling">
<input type="image" src="thumbs-up_klein.png" onClick="UpdateRecord(6)"> 1x beoordeeld
</div>
<div class="beoordeeld">Dank voor uw compliment!</div>
</li>
Het updaten van het aantal beoordelingen werkt met onderstaand stukje jquery.
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>
function UpdateRecord(id)
{
var reference = this;
$.ajax({
type: "POST",
url: "update.php",
data: 'fotonummer='+id,
cache: false,
success: function() {
$(reference).removeClass("beoordeling");
$(reference).addClass("beoordeeld");
}
});
}
</script>
function UpdateRecord(id)
{
var reference = this;
$.ajax({
type: "POST",
url: "update.php",
data: 'fotonummer='+id,
cache: false,
success: function() {
$(reference).removeClass("beoordeling");
$(reference).addClass("beoordeeld");
}
});
}
</script>
Oorspronkelijk stond in het success stukje een javascript alert. Die heb ik vervangen door removeClass / addClass. Helaas levert dat niet op wat ik zou willen.
Heb al het nodige geprobeerd, ook met toggle, maar ben (nog) onvoldoende bekend met jquery om te weten hoe dit op te lossen. Met Google vind ik heel veel om 1 item te laten verdwijnen / verschijnen, maar heb nog niet gevonden hoe ik het ene kan laten verdwijnen en een ander kan laten verschijnen.
Wie helpt?
Gewijzigd op 22/10/2016 14:32:06 door Obelix Idefix
Er zijn nog geen reacties op dit bericht.