jquery var meegeven met id / .click()

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Tom aan t Goor

Tom aan t Goor

16/07/2013 17:35:43
Quote Anchor link
Hoi,

Ik heb een klein stukje jQuery:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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)
PHP script in nieuw venster Selecteer het PHP script
1
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>

Kan dit of vraag in nu iets onmogelijks?
Gewijzigd op 16/07/2013 17:39:02 door Tom aan t Goor
 
PHP hulp

PHP hulp

25/11/2020 00:39:17
 
Kris Peeters

Kris Peeters

16/07/2013 17:48:21
Quote Anchor link
- Om te beginnen: id moet uniek zijn. Dus we zullen met class moeten werken.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>
Gewijzigd op 16/07/2013 17:50:39 door Kris Peeters
 
Tom aan t Goor

Tom aan t Goor

16/07/2013 21:09:08
Quote Anchor link
Kris, bedankt, met je uitleg en voorbeeld is het gelukt.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.