<a href="#" class="link-zaehler" data-counter="0">
<img border="0" src="http://www.osna-radio-club.de/image/download.gif">
</a>
<span class="download-zaehler">0</span>
<a href="#" class="link-zaehler" data-counter="1">
<img border="0" src="http://www.osna-radio-club.de/image/download.gif">
</a>
<span class="download-zaehler">0</span>
<a href="#" class="link-zaehler" data-counter="2">
<img border="0" src="http://www.osna-radio-club.de/image/download.gif">
</a>
<span class="download-zaehler">0</span>
// Array, welches eine DataVar simulieren soll
// Statt emulatedDataVar später die richtige DataVar nutzen
var emulatedDataVar = [53, 19, 37];
$(document).ready(function(){
function loadFromDataVar(counter) {
// hier die entsprechende Position der DataVar laden und zurückgeben
return emulatedDataVar[counter];
}
function saveInDataVar(counter, newValue) {
// hier den neuen Wert in die entsprechende Position der DataVar speichern
emulatedDataVar[counter] = newValue;
}
// setze nach dem Laden der Seite die aktuellen Werte aus der DataVar
$('.link-zaehler').each(function(index, element){
// jeder Link-Zähler wird hier einmalig als "element" durchlaufen
var linkZaehler = $(element);
// das nachfolgende Element ist der angezeigte Download-Zähler
var downloadZaehler = linkZaehler.next('.download-zaehler');
// bestimme aus dem Attribut "data-counter" die Position des zugehörigen Counters in der DataVar
var counterIndex = linkZaehler.data('counter');
// lade den Counter aus der DataVar und setze den Text im Download-Zähler
var valueInDataVar = loadFromDataVar(counterIndex);
downloadZaehler.text(valueInDataVar);
});
// reagiere auf Klick und aktualisiere die DataVar sowie den angezeigten Text
$('.link-zaehler').click(function(){
// das geklickte Element ist der Link-Zähler und das nachfolgende der angezeigte Counter
var linkZaehler = $(this);
var downloadZaehler = linkZaehler.next('.download-zaehler');
// lese das Attribut "data-counter" aus, um die Position des passenden Counters in der DataVar zu bestimmen
var counterIndex = linkZaehler.data('counter');
// lese den bisherigen Wert des Counters aus der DataVar ...
var oldCounterValue = loadFromDataVar(counterIndex);
// ... und erhöhe ihn um eins
var newCounterValue = oldCounterValue + 1;
// speichere den neuen Wert an die passende Position des Counters in der DataVar ...
saveInDataVar(counterIndex, newCounterValue);
// ... und setze den neuen Wert in das Textfeld hinter dem Download-Link
downloadZaehler.text(newCounterValue);
});
});
.link-zaehler {
text-decoration: none;
}
.download-zaehler {
color: red;
}
External resources loaded into this fiddle: