Keskustelu: Nettisivujen teko: jQuery kysymys

Minulla on useita linkkejä, joissa jokaisessa on id. Tähän tyyliin:

<a href="" id="a1">Link</a>
<a href="" id="a2">Link</a>
<a href="" id="a3">Link</a>
<a href="" id="a4">Link</a>
<a href="" id="a5">Link</a>

Miten jQueryllä pystyy tunnistamaan mitä linkkiä painetaan? Tarkoitus olisi vaihtaa linkin tekstiä kun tiettyä linkkiä painaa.

Aika helposti tuon saisi tehtyä ihan perus javascriptillä. Onko pakko käyttää jQueryä?

MikaBug kirjoitti:

Aika helposti tuon saisi tehtyä ihan perus javascriptillä. Onko pakko käyttää jQueryä?

Javascriptillä tuo onnistuisikin, mutta tarkoitus olisi opiskella jQueryn käyttöä kun sitä olen jo monessa muussa kohtaa käyttänyt samalla sivulla.

$('#a1, #a2, #a3').click(function () {
      $(this).html("Click!");
    });

Ei ole testattu, mutta idea ainakin käynee ilmi.

JTS kirjoitti:

$('#a1, #a2, #a3').click(function () {
      $(this).html("Click!");
    });

Ei ole testattu, mutta idea ainakin käynee ilmi.

Muuten olisi hyvä mutta tuosta tulee hirveän kokoinen kun noita linkkejä on paljon ja koodi tarvisi kirjoittaa aina uusiksi kun uusia linkkejä tulee.

Putkalainen kirjoitti:

JTS kirjoitti:

$('#a1, #a2, #a3').click(function () {
      $(this).html("Click!");
    });

Ei ole testattu, mutta idea ainakin käynee ilmi.

Muuten olisi hyvä mutta tuosta tulee hirveän kokoinen kun noita linkkejä on paljon ja koodi tarvisi kirjoittaa aina uusiksi kun uusia linkkejä tulee.

Puhut nyt selectorista? Voit laitaa kaikille halutuille elementeille vaikka oman classin "myClick", ja muuttaa alkuosan muotoon:
$('.myClick')

Tässä se mitä hain, jos joku muu tarvii:

$(".click").click(function(){
id = this.id;
});

Jotta toiset eivät ihmettele, niin oletettavasti lisäsit jokaiselle linkille classin click?

Mutta minulla on muutakin huomioitavaa... Jos nuo linkit on todellakin noin kirjoitettuna, niin siinä tapauksessa niissä on HTML:n rakenteen kannalta ehkä enemmän miettimisen varaa, varsinkin jos ne edustavat yhtenäistä linkkien ryhmää. Yleensä tämmöisessä tapauksessa linkit sijoitetaan listaksi:

<ul id="a">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
</ul>

Kun on saatu tämmöinen tilanne, niin jQuerystäkin tulee hieman tarkemmin valikoiva (testaamaton tosin):

$("#a a").click(function(){

});

Ja samalla toki voidaan vähän tyylitellä CSS:llä tarkemmin ulkoasua eikä jokaiselle linkkielementille tarvitse turhaan tunkea classia, eli lopputulos on pelkkää win-win -tilannetta. Yhden ID:llä tunnistettavan elementin kautta voidaan tunnistaa kaikki muut.