jQuery: Hinzufügen von zwei Attributen über .attr (); Methode

104

BEARBEITEN:

Ich habe gelernt, dass die Verwendung eines anderen Werts als _blankNICHT in mobilen Browsern funktioniert, um neue Fenster / Registerkarten zu öffnen.

Wenn Sie beispielsweise ein neues Fenster / eine neue Registerkarte öffnen müssen:

  • Dies funktioniert in allen Browsern, auch in mobilen Browsern : target="_blank".

  • Dies funktioniert nicht auf mobilen Browsern, aber es funktioniert auf Desktop - Browsern: target="new".

- -

Obwohl ich diesen hier habe, bin ich mir nicht sicher, ob es einen besseren Weg gibt, oder ob der Weg, den ich bekommen habe, der richtige / einzige Weg ist.

Grundsätzlich ersetze ich alle target="_new"oder target="_blank"Attributwerte durch target="nw". Auf diese Weise wird nur ein neues Fenster geöffnet und darin werden alle anderen neuen Fenster geöffnet, um den Benutzer nicht mit mehreren Fenstern zu überfordern.

Ich füge auch ein Attribut " In einem neuen Fenster öffnen " hinzu title="".

Die Lösung, die ich erstellt habe, ist folgende:

$("a[target='_blank'], a[target='_new']").attr('target','nw').attr('title','Opens in a new window');

Beachten Sie die beiden .attr();Methoden.

Ist dies der richtige Weg, um einem Element zwei Attribute hinzuzufügen?

Ich habe es versucht, .attr('target','nw','title','Opens in a new window')aber es hat nicht funktioniert.

Der Grund, den ich frage, ist das DYR-Prinzip (Don't Repeat Yourself). Wenn ich also meinen Code verbessern kann, großartig, wenn nicht, dann ist es das, was es ist.

Vielen Dank.

Ricardo Zea
quelle
@zzzzBov, ja, du hast recht, danke für die Info.
Ricardo Zea
Ich wollte zwei Attribute so einstellen, dass sie den gleichen Wert haben, also ist es eine Schande, dass .attr('a,b','value')es nicht funktioniert. Ich habe mich .attr('a',1).attr('b',1)auch entschieden. Weniger auf neue Fenster angewiesen zu sein, könnte ein anderer Ansatz sein, in Ihrem Fall jedoch @ricardozea: P
Alastair

Antworten:

228

Sollte arbeiten:

.attr({
    target:"nw", 
    title:"Opens in a new window",
    "data-value":"internal link" // attributes which contain dash(-) should be covered in quotes.
});

Hinweis :

" Beim Festlegen mehrerer Attribute sind die Anführungszeichen um Attributnamen optional.

WARNUNG : Wenn Sie das Attribut 'class' festlegen, müssen Sie immer Anführungszeichen verwenden!

Aus der jQuery-Dokumentation (Sep 2016) für .attr :

Wenn Sie versuchen, das Typattribut für ein über document.createElement () erstelltes Eingabe- oder Schaltflächenelement zu ändern, wird in Internet Explorer 8 oder älter eine Ausnahme ausgelöst.

Bearbeiten :
Zum späteren Nachschlagen ... Um ein einzelnes Attribut zu erhalten, würden Sie verwenden

var strAttribute = $(".something").attr("title");

Um ein einzelnes Attribut festzulegen, würden Sie verwenden

$(".something").attr("title","Test");

Um mehrere Attribute festzulegen, müssen Sie alles in {...} einschließen.

$(".something").attr( { title:"Test", alt:"Test2" } );

Bearbeiten - Wenn Sie versuchen, das Attribut "Aktiviert" über ein Kontrollkästchen abzurufen / festzulegen ...

Sie müssen prop() ab jQuery 1.6+ verwenden

Die Methode .prop () bietet eine Möglichkeit, Eigenschaftswerte explizit abzurufen, während .attr () Attribute abruft.

... das wichtigste Konzept für das überprüfte Attribut ist, dass es nicht der überprüften Eigenschaft entspricht. Das Attribut entspricht tatsächlich der Eigenschaft defaultChecked und sollte nur zum Festlegen des Anfangswertes des Kontrollkästchens verwendet werden. Der aktivierte Attributwert ändert sich nicht mit dem Status des Kontrollkästchens, während dies bei der überprüften Eigenschaft der Fall ist

Also auf die geprüfte Status zu erhalten eine Checkbox, die Sie verwenden sollten:

$('#checkbox1').prop('checked'); // Returns true/false

Oder um das Kontrollkästchen als aktiviert oder deaktiviert zu aktivieren , sollten Sie Folgendes verwenden:

$('#checkbox1').prop('checked', true); // To check it
$('#checkbox1').prop('checked', false); // To uncheck it
Adam Tomat
quelle
1
Aha! Ok, darauf habe ich mich bezogen. Vielen Dank für die Erklärung, deshalb habe ich Ihre Antwort der von Derek vorgezogen. Danke Adam. PS. Ich werde Ihre Antwort in 7 Minuten akzeptieren. Ich kann sie jetzt nicht akzeptieren.
Ricardo Zea
Korrektur: Sie können das Typattribut im IE ändern, wenn das Element neu erstellt und noch nicht zum DOM hinzugefügt wurde.
Akash Kava
Um mehrere Attribute festzulegen, müssen Sie alles in {...} einschließen ... Müssen die Schlüssel nicht in Anführungszeichen stehen?
Gcamara14
27

Der richtige Weg ist:

.attr({target:'nw', title:'Opens in a new window'})
Derek
quelle
9

Wenn Sie wissen, was Bootstrap-Attribute dynamisch in das Ankertag einfügen sollen, hilft Ihnen dies sehr

 $(".dropdown a").attr({
      class: "dropdown-toggle",
     'data-toggle': "dropdown",
      role: "button",
     'aria-haspopup': "true",
     'aria-expanded': "true"
});
Tejas Soni
quelle
2

Etwas wie das:

$(myObj).attr({"data-test-1": num1, "data-test-2": num2});
Jaydeep Patel
quelle
1

Verwenden Sie geschweifte Klammern und fügen Sie alle Attribute ein, die Sie hinzufügen möchten

Beispiel:

$('#objId').attr({
    target: 'nw',
    title: 'Opens in a new window'
});
Javaprodigy
quelle
0
Multiple Attribute

var tag = "tag name";
createNode(tag, target, attribute);

createNode: function(tag, target, attribute){
    var tag = jQuery("<" + tag + ">");
    jQuery.each(attribute, function(i,v){
        tag.attr(v);
    });
    target.append(tag);
    tag.appendTo(target);
}
var attribute = [
    {"data-level": "3"},
];
Wonbin
quelle
Danke für deine Antwort. Können Sie bitte Ihren Code erklären oder eine Demo hinzufügen, die funktioniert oder so?
Ricardo Zea