✔ jQuery - verschiedene id's mit einer Funktion steuern!

[tobi222]

Hallo zusammen,

ich arbeite gerade an meinem Blog und habe folgenden Code:

$(document).ready(function(){			   

	$("#tag_hide_1").click(function(){
		$("#infos_1").slideToggle("fast");
});
	$("#tag_hide_2").click(function(){
		$("#infos_2").slideToggle("fast");
});
	$("#tag_hide_3").click(function(){
		$("#infos_3").slideToggle("fast");
});
	$("#tag_hide_4").click(function(){
		$("#infos_4").slideToggle("fast");
});
	$("#tag_hide_5").click(function(){
		$("#infos_5").slideToggle("fast");
});
	$("#tag_hide_6").click(function(){
		$("#infos_6").slideToggle("fast");
});
	$("#tag_hide_7").click(function(){
		$("#infos_7").slideToggle("fast");
});
	$("#tag_hide_8").click(function(){
		$("#infos_8").slideToggle("fast");
});
	$("#tag_hide_9").click(function(){
		$("#infos_9").slideToggle("fast");
});
	$("#tag_hide_10").click(function(){
		$("#infos_10").slideToggle("fast");
});

});

für die 10 Posts. Ich würde gern die Funktion vereinfachen, dass sie für jeden Post funktioniert. Bin neu bei jQuery und habe nur dieses einfache System gefunden. Der Blog läuft auf Wordpress und soll 10 Posts je Seite haben.

Weiss evtl. jemand eine Lösung?

Gruß Tobi

 

[CPoly]

Ungetestet:

$(document).ready(function(){			   
	$("[id^=tag_hide_]").click(function() {
		$("#infos_"+this.id.match(/tag_hide_([0-9]*)/)[1]).slideToggle("fast");
	});
});

Edit: na toll, die Board-Software baut da Zeichen ein, die nicht hingehöhren.

Wenn du auf Zitieren klickst, siehst du den Code so, wie ich ihn eingegeben habe.

 

[tobi222]

Danke CPOLY,

funktioniert erstmal prima! Aber wie sieht es aus wenn Wordpress die ID's vergibt z.b. 857, 859, 861 usw. ?

 

[CPoly]

Ich erklär dir kurz wie mein Code funktioniert, das sollte deine Frage beantworten.

$("[id^=tag_hide_]")

Damit werden alle Elemente ausgewählt, deren ID mit "tag_hide_" beginnt.

$("#infos_"+this.id.match(/tag_hide_([0-9]+)/)[1])

Damit wird das Element mit der id "infos_einezahl" ausgewählt, wobei "einezahl" der Zahl entspricht, welche auf "tag_hide_" folgt. Die Zahl extrahiere ich mittels Regulärem Ausdruck aus der ID des geklickten Elementes.

Das ganze funktioniert für jede beliebige ID, also auch "tag_hide_861" und "infos_861".
Du klickst auf ein Element mit der ID "tag_hide_1072" und das Element "infos_1072" wird daraufhin ein- bzw. ausgeblendet.

Edit: Ersetze am besten noch [0-9]* durch [0-9]+, dann werden nur Elemente gefunden bei deren ID nach "tag_hide_" mindestens eine Zahl folgt (anstatt beliebig viele, also auch keine). Das ändert aber absolut nichts an der Funktionsweise, ist nur "korrekter".

 

[tobi222]

Danke CPoly für deine Hilfe und die Erklärung wie alles funktioniert!