jquery var meegeven met id / .click()

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mobile Developer in Oost-Nederland (Android en/of

Bedrijfsomschrijving Een unieke kans voor Mobile Developers in Oost-Nederland. Deze prachtige organisatie is namelijk opzoek naar een Mobile Developer. Mobile Development en Ops Engineering gaan hand in hand bij deze organisatie dat een hoog verantwoordelijkheidsgevoel draagt. Als organisatie ontwikkelt zij dan ook veelal mobiele applicaties ter inspiratie en ondersteuning van belangrijke sectoren in Nederland. Met het technische team van gepassioneerde developers en engineers voeren ze dagelijks veelal diverse, inspirerende en complexe werkzaamheden uit. Door gebruik van innovatieve software en de nieuwste platformen binnen de sector is deze klant dan ook zeker als vooruitstrevend te betitelen waar zijn enorm veel waarde

Bekijk vacature »

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

17/01/2021 06:18:00
 
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.