jquery click(function() alternativ zu onclick=meinefunktion() parameter übergabe

sepp01 · 1. Januar 2015

Hallo und allen ein frohes neues Jahr 2015

ich versuche gerade zum ursprünglichen Javascript Event onclick="meinefunction(wert1, wert2, wert3 )";

eine Version von jquery zu finden damit ich das javascript event aus meinem html-Bereich rauss bekomme und ganz auf das Framework jquery setzen kann.

Dabei fragte ich mich wie ich nun Werte bei click übergeben kann.

Sorry ich kann es leider nur auf diese Art beschreiben... bitte also um Entschuldigung falls den Profis von Euch zu Laienhaft beschrieben ist.

Beispiel:

Code

function meinefunction(wert1, wert2, wert3){ //mach was}</script>
<body><div id="tab-1"><button id="button1" onclick="meinefunction(1,3,5);">test</button><button id="button2" onclick="meinefunction(1,5,5);">test</button>
<button id="button3" onclick="meinefunction(2,1,3);">test</button>
</div>
<div id="tab-2"><button id="button1" onclick="meinefunction(1,3,5);">test</button><button id="button2" onclick="meinefunction(1,5,5);">test</button>
<button id="button3" onclick="meinefunction(2,1,3);">test</button>
</div></body>

Bitte, das oben ist nur ein sehr abgespecktes Beispiel, soll aber zeigen das ich Elternelemente und Kindelemente nutze (im Endeffekt sind es Registerkarten die via PHP dynamisch erstellt werden)
so hatte ich das bisher gemacht. jedoch wurde so mein Code sehr unübersichtlich da mir auch die Erfahrung fehlte.
Da ich nun durch jQuery Webseiten einiges über deren selector's erfahren habe bemerkte ich das ich den Code sehr viel kleiner und übersichtlicher halten kann

nun möchte ich das onclick event entfernen und alles via jquery regeln.

dabei sollte jeder Button eine jquery-function bekommen

Nur habe ich keinen Schimmer wie dieser Funktion die auf click(Function() reagiert mehrere Werte übergeben kann. einen Wert aus einem vaue="5" auslesen wäre kein Problem
aber das was ich bis dato mit der onclick=meinefunction(1,3,5 ) machte nun jquery zu überlassen...

Könnt ihr mir da weiterhelfen?

Grüße Jürgen

wolf · 1. Januar 2015

Willkommen im Forum!

Lösungen gibt es (fast) immer

Wie du schon richtig erkannt hast, musst du die Parameter jetzt in den tag als Attribute schreiben statt sie in die Klammern der func. zu schreiben..
Bedeutet dein HTML sollte beispielsweise so aussehen:

HTML

<div id="tab-x" class="button-wrap">
    <button data-first="1" data-middle="3" data-last="5">Button eins</button>
    <button data-first="1" data-middle="5" data-last="5">Button zwei</button>
</div>

Wichtig hierbei ist das die Atttibute mit 'data-' anfangen, damit dein HTML valide bleibt, danach kannst du sie nennen wie du willst

Jetzt kommen wir zu jQuery erst mal identifizieren wir unsere Buttons (hierzu kannst du jeden css selector anwenden)

JavaScript

//javascript's onload() wird zu $(document).ready(func);
$(document).ready( function(event){
    var buttons = $('.button-wrap button');// Alle buttons in .button-wrap
} );

Natürlich kannst du auch jedem button die gleiche Klasse mitgeben und darüber selektieren, hauptsache du selektierst ihn
Danach lesen wir beim klicken eines buttons seine parameter aus und führen die funktion aus

JavaScript

$(document).ready( function(event){
    $('.button-wrap button').click( function(event){
        var button = $(this);// In button steckt jetzt der geklickte button




        var first = button.attr('data-first');//Attribut auslesen und in variable speichern
        var middle = button.attr('data-middle');//Attribut auslesen und in variable speichern
        var last = button.attr('data-last');//Attribut auslesen und in variable speichern




        console.log('meineFunktion('+first+', '+middle+', '+last+')');//In der Browserkonsole zur Überprüfung ausgeben




        meineFunktion(first, middle, last);//Die function mit den Parametern aufrufen
    });
} );




function meineFunction(one,two,three){
    console.log('params: '+one+' ,'+two+', '+three);//In der Browserkonsole zur Überprüfung ausgeben
    // doSth
}

Alles anzeigen

Kurzgeschrieben sieht das dann so aus:

JavaScript

$(document).ready(function(event){
    $('.button-wrap button').click( function(event){
        var b = $(this);
        meineFunktion(b.attr('data-first'), b.attr('data-middle'), b.attr('data-last'));
    });
});

Ich hoffe das war verständlich erklärt

nolags · 5. Februar 2016

Hallo
habe so ziemlich das gleiche Problem:
Ich habe eine Seite mit 4 Boxen, die ich mit meiner ausgelagerten JavaScript Funktion vergrößere, möchte aber gerne die onclick Funktion aus meiner HTML nehmen und mit JQuery ansprechen.

<html>
<head>
<script type="text/javascript" src="meinJS.js"></script>
</head>
<body>
<div id="box1" class="kaesten" onclick="changeSize('box1')"> Inhalt1 </div>
<div id="box2" class="kaesten" onclick="changeSize('box2')"> Inhalt2 </div>
<div id="box3" class="kaesten" onclick="changeSize('box3')"> Inhalt3 </div>
<div id="box4" class="kaesten" onclick="changeSize("box4')"> Inhalt4 </div>
</body>
</html>

var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
elems[i].onclick = function(){
changeSize(this.id);
}
}

var absoluteCl = document.getElementsByClassName('absoluteclass');
absoluteCl[0].onclick = function(){
console.log(document.getElementsByClassName('absoluteclass'));
document.getElementsByClassName('absoluteclass')[0].setAttribute('style','display:none');
}

Wär super wenn Ihr ne Lösung habt.

Grüße,
Nolags

wolf · 5. Februar 2016

Und was funktioniert nicht??

Basi · 5. Februar 2016

Die BB-Codes scheinbar.

wolf · 5. Februar 2016

jquery click(function() alternativ zu onclick=meinefunktion() parameter übergabe

Jetzt mitmachen!

Teilen