✔ js Variable in jQuery verwenden

[raybrackho]

Hallo Leute,

ich möchte, durch Variablen aus der URL automatisch die Farbe in meinem Colorpicker vorselektieren. Das auslesen aus der URL klappt auch wunderbar hiermit http://ajaxcssblog.com/jquery/url-re...est-variables/

Nur die Übergabe an meinen Colorpicker irgendwie nicht.
(http://www.syronex.com/software/jquery-color-picker)

<script type="text/javascript">
<!--

$(document).ready(function(){

var farbeA = $.url.param("farbe");
alert(farbeA); //Hier wird noch der korrekte Wert aus der URL ausgegeben

$('#cpm').colorPicker({			
defaultColor: farbeA, // index of the default color (optional) | Hier kommt aber nichts an
columns: 7,     // number of columns (optional)  
color: ['#ffffff', '#272727', '#001126', '#001805', '#200500', '#201400', '#1d0024'], // list of colors (optional)
// click event - selected color is passed as arg.
click: function(colorm){
$('#outputm').html(colorm.replace(/#ffffff/,"Weiß").replace(/#272727/,"Anthrazit").replace(/#001126/,"Dunkelblau").replace(/#001805/,"Dunkelgrün").replace(/#200500/,"Dunkelrot").replace(/#201400/,"Braun").replace(/#1d0024/,"Dunkellila"));
},
});
}); 
//$(document).ready //-->
</script>

Dort gibt es die Möglichkeit über "defaultColor:" die Standardselektion auszuwählen. Wenn ich nun meine URL aufrufe:
http://domain.de/index.html?farbeA=2

dann sollte eigentlich der Index von "defaultColor" auf 2 gesetzt werden. Tut er aber nicht.
Muss ich die Variable irgendwie anders schreiben damit sie in der jQuery Funktion aufgegriffen wird?

 

[rd4eva]

Anstatt alert(farbeA); solltest du mal alert(typeof farbeA); machen.
Ich könnte wetten das dabei string raus kommt und du somit versuchst einen string an defaultColor zu übergeben.
Falls ich recht habe sollte dir parseInt() weiterhelfen.

 

[CPoly]

Oder besser als parseInt ändere folgende Zeile

//vorher
defaultColor: farbeA,
//nachher
defaultColor: farbeA | 0,

 

[raybrackho]

Boah, Wahnsinn!! Es klappt. Vielen vielen dank!

Den Gedanken hatte ich auch schon, habs aber nur mit "parseFloat" versucht. Dein zweites Beispiel funktioniert perfekt!

 

[raybrackho]

wenn du mir jetzt noch erläutern kannst, warum das jetzt funktioniert mit "| 0" ?
Ist das die verkürzte Schreibweise von parseInt?

 

[CPoly]

Man nutzt dabei aus, dass JavaScript dynamische Typisierung verwendet. Das bedeutet, dass eine Variable Werte beliebigen Typs aufnehmen kann und dass zwischen Werten verschiedenen Typs dynamisch konvertiert wird. "| 0" ist eine Bit-Operation. Um diese Durchzuführen, versucht der JavaScript interpreter den linken Teil (in dem Fall ein String) in einen Integer umzuwandeln. Anschließend wird die Bit-Operation durchgeführt, welche allerdings ohne Wirkung bleibt (Bit-Oder mit Nullen ändert nichts).
Ich persönlich bin ein Fan dieser Variante, da sie sehr kurz ist. Hier noch ein Paar Varianten, welche auf dem gleichen Prinzip basieren.

"17" | 0//Bitwise or
~~"17"//Zweimal bitwise not
"17" * 1//Um die Multiplikation durchzuführen, wird der linke Operand umgewandelt

Beachten muss man aber, dass z.B. bei letzten Variante der Wert nicht zwingend in einen Ganzzahl umwandelt wird, sondern z.B. "17.5" in eine Fließkommazahl umgewandelt wird. Denn eine Multiplikation erfordert ja keinen Ganzzahl, anders als eine Bit-Operation.

Und noch als letzten Hinweis. Wenn du "parseInt()" verwendest, gib immer als zweiten Parameter eine "10" an, denn sonst kann es zu unerwarteten Ergebnissen kommen. Z.B. werden Zahlen mit führenden Nullen dann zur Basis 8 umgewandelt, was man aber in der Regel nicht beabsichtigt.