jquery var meegeven met id / .click()
Ik heb een klein stukje jQuery:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$('#btnContact').click(function(){
$('#content').fadeOut('slow', function() {
$.get("contact.php", function(response) {
$('#content').html(response)
$('#content').fadeIn('slow');
});
});
})
</script>
$('#btnContact').click(function(){
$('#content').fadeOut('slow', function() {
$.get("contact.php", function(response) {
$('#content').html(response)
$('#content').fadeIn('slow');
});
});
})
</script>
Nu wordt dit stuk dus uitgevoerd als je ergens op klikt met het id btnContact.
Maar als ik dit stuk code nu voor bijv. 5 buttons wil gebruiken, zou het betekenen dat ik vijf keer het zelfde stuk code moet veranderen.
Kan ik het stuk code ook veranderen in zo iets?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<div id="pagina#index">Home</div>
<div id="pagina#contact">Contact</div>
<script type="text/javascript">
$('#pagina').click(function(){
$('#content').fadeOut('slow', function() {
$.get(<get after #>+".php", function(response) {
$('#content').html(response)
$('#content').fadeIn('slow');
});
});
})
</script>
<div id="pagina#contact">Contact</div>
<script type="text/javascript">
$('#pagina').click(function(){
$('#content').fadeOut('slow', function() {
$.get(<get after #>+".php", function(response) {
$('#content').html(response)
$('#content').fadeIn('slow');
});
});
})
</script>
Kan dit of vraag in nu iets onmogelijks?
Gewijzigd op 16/07/2013 17:39:02 door Tom aan t Goor
Dus niet
<div id="btnContact"> ---> $('#btnContact')
maar
<div class="buttons"> ---> $('.buttons')
---
- Nu kunnen we extra gegevens meegeven, met het data- attribute.
bv.
<div data-url="http://google.be" class="buttons">
Die url kunnen we lezen met $(selector).data('url')
- this: Op welke (van de 5) button heeft de gebruiker geklikt?
het antwoord is this; of $(this) als je het jQuery object van het element wil.
dus bv.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div data-url="index.php?page=kalender" class="buttons">
<script>
$('.buttons').click(function(){
var button_geklikt = $(this); // de button waarop geklikt is
var url = button_geklikt.data('url'); // zo lees je de url in data-url="..."
$.get(url, function(response) { ... });
});
</script>
<script>
$('.buttons').click(function(){
var button_geklikt = $(this); // de button waarop geklikt is
var url = button_geklikt.data('url'); // zo lees je de url in data-url="..."
$.get(url, function(response) { ... });
});
</script>
Gewijzigd op 16/07/2013 17:50:39 door Kris Peeters