jQuery '#' + Daten ("target") Muster

Ich habe dies ein Haufen gesehenjQuery '#' + Daten ("target") Muster

$("#trigger").click(function(){ 
    $("#" + $(this).data("target")).hide(); 
})

Es sieht ein wenig seltsam für mich zu Führen Sie diese String-Verkettung aus, um Selektoren zu erstellen, die dann zum Abrufen des Zielelements verwendet werden. Gibt es ein besseres Muster in Javascript (mit jQuery verfügbar) zum Einrichten von Handlern für ein Element, das über ein anderes Zielelement wissen muss?

Quelle

2013-05-07 spike

Es mag ein wenig peinlich, aber es ist nichts falsch daran. – j08691

@ j08691 Ich weiß, es funktioniert, auf der Suche nach einigen erfahrenen Argumenten über Best Practices von Menschen, die größere JS-Projekte gepflegt haben. – spike

Warum Sie String-Verkettung tun speichern nur die ID mit #

<a href="#" id="trigger" data-target="#content">Click me</a> 

$("#trigger").click(function(){ 
    $($(this).data("target")).hide(); 
})

Ebenso können Sie alle Selektoren speichern, wie in data-target sagen für die Ex ist: - .tab1 etc, so dass Sie müssen keine String-Verkettung erneut durchführen innerhalb des Klicks oder eines beliebigen Ereignisses.

Quelle

2013-05-07 16:57:00 PSL

Nur aus Neugier: Ist das '$()' um '$ (this) .data (" target ")' wirklich notwendig? – SirDerpington

@SirDerpington Ja, 'this' ist ein DOM-Element und hat keine' data' -Funktion. 'data' ist eine Funktion von jquery, daher müssen Sie' $ 'verwenden, um ein jquery-Objekt zu erstellen. –

Ein weiterer Vorteil dieses Ansatzes ist, dass ich nicht länger auf IDs beschränkt bin. Jeder Selektor würde funktionieren. – spike

Warum so etwas wie dies nicht tun, einen viel besseren Ansatz meiner Meinung nach:

// Set the target 
$("#trigger").data('target', $('#content')); 

// Get the target 
$("#trigger").click(function(){ 
    $(this).data("target").hide(); 
})

Wenn Sie es aus dem Backend sind einstellen, würde ich den Hash mit dem Attributwert enthält, wie andere vorgeschlagen haben.

Quelle

2013-05-07 16:55:08 Gabe

Immer wenn ich das gesehen habe, wird das Datenattribut verwendet, weil es vom Backend aus gesetzt wird. –

Fair genug, das ist ein guter Punkt. – Gabe

Richtig, ich möchte, dass JS generisch ist, damit ich Ziele in meinem Markup angeben kann und alles fließt. Ich denke, die Frage ist, wie gehen wir am besten von Strings in HTML zu Objekten in Javascript.Es ist ideal, das Datenziel auf das eigentliche jquery-Objekt zu setzen, aber wie geht das generisch? – spike

Sie haben immer die Option, den Selektor zu erstellen, sieht ein bisschen schöner als Verketten der Zeichenfolge im Selektor.

Ein wenig netter, nicht sicher, ob es das ist, wonach Sie suchen.

Quelle

2013-05-07 16:56:38 tymeJV

Ja, das könnte je nach Kontext besser lesbar sein. – spike

Ich würde die Daten vollständig überspringen, so dass gradeful Degradation.

<a href="#content" id="trigger" data-target="">Click me</a> 
<div id="content">And something will happen here</div>

mit

$("#trigger").click(function(e){ 
    e.preventDefault(); 
    $($(this).attr("href")).show(); 
    // note, i'm purposly not using this.href due to a bug in IE that would return the entire href rather than just the hash 
})

Quelle

2013-05-07 18:37:23

können Sie einfach

$('#content').modal('toggle');

Irgendwo in ihrem Code ist die modale Show zu initiieren und verstecken, können Sie verwenden auch "show"/"verstecken" Funktionalität direkt.

Ich nehme an, Sie verwenden Bootstrap und eine der neuesten Versionen von jQuery.

Viel Spaß!

Quelle

2016-11-29 15:24:17

das beantwortet meine Frage nicht. Die Frage ist nicht, wie man Dinge mit JS verstecken oder zeigen kann, es geht um Muster zum Einbetten dynamischer Selektorziele in HTML. – spike

$ (this) .attr ('Datenziel', '#myTarget');

dies funktionierte für mich

Quelle

2017-08-17 13:19:25

jQuery '#' + Daten ("target") Muster

Antwort

Verwandte Themen