JQuery erste Gehversuche =)

[parafi]

Guten Tag miteinander

Neues Jahr neue Motivation
Daher versuche ich mich mit seit neustem mit JQuery.

Dazu habe ich folgenden Code in meinem head-Tag

$(document).ready(function(){

  $(".button_home").click(function(){
    $("#hauptbox").animate({opacity: "0.1", width: "1", height: "1"}, 1200)
    .animate({width: "+=899", height: "50"}, "slow")
    .animate({height: "+=450"}, "slow")
    .animate({opacity: "0.65"}, "slow")
    return false;
  });

});

Das Ganze funktioniert auch wie es sollte.
Meine Frage nun:
Die Klasse button_home ist auf meiner Dummy-Page der Button Home. Nun hat jede normale Seite natürlich mehr als nur einen Button.
Kann ich nun $(".button_home") in ein Array umwandeln, wenn ja wie?
Oder was schlagt ihr mir für Lösungsvarianten vor?

Klar ich könnte den ganzen Code 5 Mal kopieren und 5 Mal die entsprechende Klasse angeben, doch da würde mich wohl jeder Entwickler auslachen

Besten Dank bereits im Voraus

Grüsse
parafi

 

[CPoly]

Was hast du denn mit dem Array vor? Wenn es mehrere Elemente mit der Klasse ".button_home" gibt, wird der "click"-Handler an alle gebunden. Ein jQuery Objekt repräsentiert im Prinzip nur ein Array von DOM-Objekten und die meisten Operationen werden auch auf alle Elemente angewendet (Bei anderen Operationen steht es dabei, dass zum Beispiel nur das erste Element verwendet wird. Z.B. bei ".width()").

Falls du es aber wirklich in ein Array haben willst, dann guck in die Dokumentation http://api.jquery.com/toArray/

 

[zer0]

Du könntest es mal mit $("input[type=button]") probieren. Vorrausgesetzt der Button ist ein Input-Tag.

Schau mal hier: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery unter FIND ME: USING SELECTORS AND EVENTS findest du etwas zu den Selektoren.

Liebe Grüße

 

[timestamp]

Du kannst den Links/buttons auc nur die Klasse link geben, und jeweils als ID dann die entsprechenden Seiten zuweisen. In der Funktion fragst du dann die ID ab und weißt wie du weiter fortfahren musst.

 

[parafi]

Hi miteinander

Danke für Eure hilfe!

Ich konnte mein "Problemchen" lösen.
Ich poste die Lösung einfach Mal, falls später jemand eine ähnliche Frage hat!

$(document).ready(function(){
  var arrButtons = new Array(".button_home", ".button_team", ".button_dienstleistung", ".button_galerie", ".button_kontakt")
	for (var i = 0; i < arrButtons.length; i++){
  $(arrButtons[i]).click(function(){
    $("#hauptbox").animate({opacity: "0.1", width: "1", height: "1"}, 1200)
      .animate({width: "+=899", height: "50"}, "slow")
      .animate({height: "+=450"}, "slow")
      .animate({opacity: "0.65"}, "slow")
      return false;
    });
  }
});

 

[CPoly]

Das kannst du auch wesentlich einfacher haben:

$(document).ready(function(){
	$(".button_home, .button_team, .button_dienstleistung, .button_galerie, .button_kontakt").click(function(){
		$("#hauptbox")
			.animate({opacity: "0.1", width: "1", height: "1"}, 1200)
			.animate({width: "+=899", height: "50"}, "slow")
			.animate({height: "+=450"}, "slow")
			.animate({opacity: "0.65"}, "slow")
		
		return false;
	});
});

Und ich gehe mal davon aus, dass du es sogar noch einfacher haben kannst, aber ich kenne dein Markup nicht.

 

[zer0]

Hallo,

das Problem an deiner Lösung ist das wenn ein neuer Button hinzukommt du den JavaScript-Code ändern musst.

Wenn deine Button's zum Beispiel Bilder sind, also <img>-Tag's, und diese alle eine Klasse haben die mit "button_" beginnt könntest du folgendes ausprobieren:

$(document).ready(function(){
    // Alle img-Tag's die eine Klasse haben, die mit "button_" beginnt
    $("img[class*=button_]").click(function(){
        $("#hauptbox")
            .animate({opacity: "0.1", width: "1", height: "1"}, 1200)
            .animate({width: "+=899", height: "50"}, "slow")
            .animate({height: "+=450"}, "slow")
            .animate({opacity: "0.65"}, "slow")
        
        return false;
    });
});

Natürlich kannst du auch einen anderen Tag als <img> für die Button's verwenden, und auch statt über Klassen kannst du es über das "name"-Attribut steuern.

Liebe Grüße