Übergeben von Argumenten und Werten von HTML, jQuery (Veranstaltungen)

Was ist die Praxis, Argumente übergeben von HTML, jQuery events-Funktion.
Zum Beispiel bekommen die id der Zeile aus db: 

<tr class="jq_killMe" id="thisItemId-id">
 ...
</tr>

und jQuery:

$(".jq_killMe").click(function () {
     var tmp = $(this).attr('id).split("-");
     var id = tmp[0]
     //...
}

Was ist die beste Praxis, wenn ich will, passieren mehr als einem argument?
Ist es besser, nicht zu verwenden jQuery? Zum Beispiel:

<tr onclick="killMe('id')">
 ...
</tr>

Finde ich nicht die Antwort auf meine Frage, ich werde froh sein, auch für die links.
Danke.

Bearbeiten (vor der Lösung)

Also die von Ihnen vorgeschlagenen zwei Methoden das zu tun:

  1. Fügen Sie benutzerdefinierte Attribute zu element (XHTML)
  2. Das Attribut ID verwenden, und analysieren Sie es durch regex
  3. Attribut data -* - Attribute in HTML5
  4. Verborgenen Kinder Elemente

Ich mag die erste Lösung, aber... ich möchte (ich habe zum (Arbeitgeber -)) Gültiger code. Hier ist eine schöne Frage und Antworten:

Was also, wenn Sie benutzerdefinierte HTML-Attribute sind nicht valides XHTML?

Und das zweite ist nicht so schön wie der erste, aber gültig. Also, der Kompromiss ist...

Die Dritte ist die Lösung für die Zukunft, aber hier ist eine Menge CMS, wo wir mit XHTML oder HTML4. (Und HTML5 ist der lange Prozess)

InformationsquelleAutor Jaroslav Moravec | 2010-05-25
  1. 2

    Der einfachste Weg, dies zu tun ist, um die Informationen in benutzerdefinierten Attributen, wie diese:

    <tr class="jq_killMe" id="thisItemId-id" itemId="42" itemName="Answer">
 ...
</tr>

$(".jq_killMe").click(function () {
     var id = $(this).attr('itemId');
     var name = $(this).attr('itemName');
     //...
}

    Denken Sie daran, richtig zu entkommen, die Werte, um zu verhindern, XSS.

    • erwähnen Sie, dass benutzerdefinierte Attribute sind nicht zwangsweise crossbrowser-kompatibel ist, noch funktioniert es mit standard-dtd strict
    • AFAIK, dies funktioniert in jedem browser.
    • es kann von allen Browsern unterstützt wird heutzutage, so lange wie xhtml wird unterstützt und ist verfügbar. Anyways, ich bin mir nicht ganz sicher über W3C und benutzerdefinierte Attribute.
    • XHTML wird nicht unterstützt oder verfügbar in IE < 9. (Es sei denn, du meinst die tag-Suppe mit einem XHTML-Doctype)
    InformationsquelleAutor SLaks
  2. 2

    Und was ist mit verschachtelten Elementen?

    <style type="text/css">
  .data {display: none}
</style>

<tr class="jq_killMe">
   <span id="data-id" class="data">my id</span>
   <span id="data-name" class="data">answer</span>
   ...
</tr>

    Aber es gibt einige Fragen:

    • Ist es so sicher wie Barrierefreiheit ein?
    • Wie Prozentsatz der Nutzer hat css deaktiviert?

    Bearbeiten

    Bessere Weg ist die Verwendung <input type="hidden" />

    <tr class="jq_killMe">
   <input type="hidden" name="data-id" value="my id" />
   <input type="hidden" name="data-name" value="answer" />
   ...
</tr>

    und jQuery scheint, wie diese

    $(".jq_killMe").click(function() {
    var id = $(this).children("input[name='data-id']");
    //...
});
    InformationsquelleAutor Jaroslav Moravec
  3. 2

    Können Sie wählen zwischen verschiedenen Möglichkeiten, je nachdem, wie viele Parameter, die Sie benötigen.
    Wenn Sie mehr als eine haben, können Sie entweder fügen Sie benutzerdefinierte Attribute, aber nicht html-konform ist.

    Manchmal müssen Sie möglicherweise auch zum einbetten der Werte innerhalb der id, wie Sie tun:

    <tr class="jq_killMe" id="thisItemId-id">

    Aber ich würde das in etwa so machen:

    <tr class="jq_killMe" id="thisItemId1">

    wo die 1 ist die id, und verwenden Sie dann RegEx zu tun, anstatt die split:

    $(".jq_killMe").click(function () {
     var fullid= $(this).attr('id);
     //do Regex here to either replace or match anything that follows 'thisItemId'
}
    InformationsquelleAutor Damiano Fusco
  4. 0

    Es hängt vom Kontext ab. Express die Daten in die semantisch entsprechenden Weise.

    Könnte es eine Klasse verwenden. Es könnte Nutzung von Daten in eine Zelle innerhalb der Zeile. Es könnte Nutzung von Daten in einem Attribut eines Elements in einer Zelle (z.B. eine URI in dem href eines anchor).

    Gibt es nicht eine generische Lösung, die ist immer am besten.

    InformationsquelleAutor Quentin
  5. 0

    Andere option ist die Bereitstellung der Daten über ein script und verwenden Sie dann die Zeilen-id zu suchen.

    z.B.

    <script>
 var MyData = {
  table: [
   { name: "John", age: 20 },
   { name: "Jane", age: 40 }
  ]
 }
</script>

    dann Suche die Daten mit den folgenden:

    $(".jq_killMe").click(function () {
 var tmp = $(this).attr('id').split("-");
 var id = tmp[0];
 var data = MyData.table[id];
 //...
}
    InformationsquelleAutor Sean Hogan
Schreibe einen Kommentar