it-swarm.com.de

jQuery '#' + Datenmuster ("Ziel")

Ich habe eine ganze Reihe gesehen: 

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

Mit JS so:

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

Es erscheint mir etwas komisch, diese String-Verkettung zu machen, um Selektoren zu erstellen, die dann zum Abrufen des Zielelements verwendet werden. Gibt es in Javascript (mit jQuery verfügbar) ein besseres Muster zum Einrichten von Handlern für ein Element, das über ein anderes Zielelement informiert werden muss?

9
spike

Warum Sie eine String-Verkettung machen, speichern Sie einfach die ID mit #.

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

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

Ebenso können Sie beliebige Selektoren wie in data-target speichern, beispielsweise für ex: - .tab1 usw., sodass Sie die Zeichenfolgenverkettung nicht erneut innerhalb des Klicks oder eines Ereignisses durchführen müssen.

24
PSL

Sie können einfach verwenden 

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

Irgendwo in Ihrem Code, um das modale Ein- und Ausblenden einzuleiten, Sie können sogar die Funktionen "Anzeigen"/"Ausblenden" direkt verwenden.

Ich gehe davon aus, dass Sie Bootstrap und eine der neuesten Versionen von jQuery verwenden.

Genießen !

4
Pini Cheyni

Warum nicht so etwas tun, meiner Meinung nach viel besser:

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

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

Wenn Sie es vom Backend aus festlegen, würde ich den Hashwert mit dem Attributwert aufnehmen, wie von anderen vorgeschlagen.

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

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

Sie haben immer die Möglichkeit, den Selector zu erstellen. Sie sieht ein bisschen schöner aus, als wenn Sie den String innerhalb des Selektors verketten.

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

Ein bisschen schöner, nicht sicher, ob es das ist, wonach Sie suchen.

1
tymeJV

$ (this) .attr ('data-target', '#myTarget');

das hat für mich funktioniert

0
Sayantan Dey

Ich würde die Daten komplett überspringen und somit eine grausame Verschlechterung zulassen.

<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
})
0
Kevin B