[JQUERY] code verkürzen oder Schleifen

[stehepa]

Hallo,

ich bastel grad an einem Aufkleberdesigner. Ich möchte eine <select><option> kombination benutzen, um schriftarten wählen zu können. Nun möchte ich mein Vorschaufeld (id="preview") beim Wechsel der Schriftart sofort aktualisieren. Das löse ich derzeit mit jquery und .css. Das funktioniert gut. Nur habe ich das Problem das mein Code unendlich lang wird, wenn ich jedes einzelne <option> Element anspreche. Bei ca. 150 Schriftarten mache ich mich voll zur Schere. hat jemand einen Denkanstoß, wie ich die sache mit einer foreach oder passenden anderen schleife lösen könnte?

Derzeit sieht es so aus:

HTML:

<select id="eigenschaftwert_113">
								<option  id="0" style="font-family: 20th Century Font; " font="20th Century Font" value="1,0,0" >
									20th Century Font
								</option>
								<option id="1" style="font-family: Aaaiight; " font="Aaaiight" value="310,0,0" >
									Aaaiight
								</option>
								<option id="2" style="font-family: Aachen BT; " font="Aachen BT" value="3,0,0" >
									Aachen BT
								</option>
								<option id="3" style="font-family: Aardvark Cafe; " font="Aardvark Cafe" value="183,0,0" >
									Aardvark Cafe
								</option>
								<option id="4" style="font-family: Academy Engraved LET; " font="Academy Engraved LET" value="174,1,1" >
									Academy Engraved LET
								</option>
								<option id="5" style="font-family: Acapulco; " font="Acapulco" value="4,0,0" >
									Acapulco
								</option>......</select>

JS:

function schriftartholen(){
    $("#0" ).on( "click", function() {
    $('#preview').css("font-family", "20th Century Font");
    $("#eigenschaftwert_113").css("font-family","20th Century Font");
    });
    $("#1" ).on( "click", function() {
    $('#preview').css("font-family", "Aaaiight");
    $("#eigenschaftwert_113").css("font-family","Aaaiight");
    });
    $("#2" ).on( "click", function() {
    $('#preview').css("font-family", "Aachen BT");
    $("#eigenschaftwert_113").css("font-family","Aachen BT");
    });
    $("#3" ).on( "click", function() {
    $('#preview').css("font-family", "Aardvark Cafe");
    $("#eigenschaftwert_113").css("font-family","Aardvark Cafe");
    });
    $("#4" ).on( "click", function() {
    $('#preview').css("font-family", "Academy Engraved LET");
    $("#eigenschaftwert_113").css("font-family","Academy Engraved LET");
    });
    $("#5" ).on( "click", function() {
    $('#preview').css("font-family", "Acapulco");
    $("#eigenschaftwert_113").css("font-family","Acapulco");
    });....

Hinweis: ich kann nur html und js jedoch KEIN php verwenden, da dieser Konfigurator mal als komplettes Konstrukt bei Ebay rein soll.

Danke für konstruktive Vorschläge.

 

[Sempervivum]

Probier's mal so:

$("#eigenschaftwert_113 option").click(function(){
    font = $(this).css("font-family");
    $('#preview').css("font-family", font);
    $("#eigenschaftwert_113").css("font-family", font);
});

Ungetest, bin mir nicht hunderprozentig sicher, ob es so geht oder ob man each verwenden muss.

 

[SteelWheel]

Grüße Dich - und Willkommen in der jswelt!

Ich sehe aktuell nicht, warum Du einen Eventhandler je <option> benötigst. Was spräche gegen ..

<select id="eigenschaftwert_113" onchange="aufkleber.view()">

... während ...

var aufkleber = {
  view: function(){
     var id= parseInt($("#eigenschaftwert_113").val(), 10);
     $("#preview").css("font-family", aufkleber.font(id));
  },
  font: function(i){
    switch(i){
      case 0: return "20th Century Font"; break;
      case 1: return ... break;
    }
  }
}

EDIT: lach ... ja, oder auf switch() verzichten und die Angabe aus "font" nehmen.

 

[stehepa]

Das geht zu 100%. Danke sehr.

 

[Sempervivum]

Welche Lösung hast Du denn genommen, meine oder die von Steelwheel?

 

[stehepa]

die erste Lösung. Aber ich habe eine weitere Frage

ich nehme zum Ausgeben der Eingaben auch eine <textarea>. Kann ich irgendwie abfangen dass, wenn das Ende der textarea erreicht ist, diese nicht umbricht, sondern einfach der Text entsprechend eine Stufe kleiner wird, es ei denn, der Kunde bricht seine Eingabe manuell um mit ENTER. Hier der Link zum Projekt:

Stickerkonfigurator

 

[Sempervivum]

Ich würde die Zeichen parallel in ein (unsichtbares) span mit der selben Zeichenformatierung schreiben. Dann kannst Du mit width() die Breite ermitteln, mit der Breite deiner Textarea vergleichen und entsprechend die Größe des Fonts verringern.

 

[stehepa]

Das klappt sehr gut. Nur eine "Formel" zur Berechnung fehlt mir. Angenommen der <span> ist 1000 pixel breit, wie verringer ich die fonts entsprechend? Es geht ja nicht, dass ich mit Prozenten arbeite. Irgendwie hänge ich grad. Jemand eine Idee?
hier der Link zum Projekt (nur im FF derzeit einigermaßen praktikabel) sticker neu

 

[Sempervivum]

Du brauchst den Font ja nicht absolut zu berechnen, sondern nur kleiner machen, wenn die Größe der Textarea überschnitten ist. Je nach Maßeinheit um einige Pixel, 1 pt oder eine deiner Stufen verringern. (Wobei ich davon ausgehe, dass dir die aktuelle Größe bekannt ist.)

 

[stehepa]