jQuery: dodawanie dwóch atrybutów poprzez .attr (); metoda

105

EDYTOWAĆ:

Dowiedziałem się, że używanie innej wartości niż _blankNIE DZIAŁA w przeglądarkach mobilnych do otwierania nowych okien / kart.

Na przykład, jeśli chcesz otworzyć nowe okno / kartę:

  • To działa na wszystkich przeglądarkach, nawet przeglądarek mobilnych: target="_blank".

  • To nie działa w przeglądarkach mobilnych, ale to działa na przeglądarkach desktopowych: target="new".

-

Chociaż mam ten działający, nie jestem pewien, czy istnieje lepszy sposób na zrobienie tego, czy też sposób, w jaki go otrzymałem, jest właściwy / jedyny.

Zasadniczo to, co robię, to zastępowanie wszystkich wartości atrybutu target="_new"or target="_blank"na target="nw", w ten sposób otwarte jest tylko jedno nowe okno, aw nim wszystkie inne nowe okna, aby nie przytłoczyć użytkownika wieloma oknami.

Dodam też atrybut „ Otwiera się w nowym oknietitle="".

Tak więc rozwiązanie, które stworzyłem, jest takie:

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

Zwróć uwagę na dwie .attr();metody.

Czy to jest właściwy sposób dodawania dwóch atrybutów do elementu?

Próbowałem, .attr('target','nw','title','Opens in a new window')ale to nie zadziałało.

Pytam o zasadę DYR (Don't Repeat Yourself), więc jeśli mogę ulepszyć kod, który mam, świetnie, jeśli nie, to tak właśnie jest.

Dzięki.

Ricardo Zea
źródło
@zzzzBov, tak, masz rację, dzięki za informację.
Ricardo Zea
Chciałem ustawić dwa atrybuty, aby miały tę samą wartość, więc szkoda, .attr('a,b','value')że nie działa. Ja też się zdecydowałem .attr('a',1).attr('b',1). Mniej polegania na nowych oknach może być innym podejściem, jednak w twoim przypadku @ricardozea: P
Alastair

Odpowiedzi:

229

Powinno działać:

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

Uwaga :

Przy ustawianiu wielu atrybutów cudzysłowy wokół nazw atrybutów są opcjonalne.

OSTRZEŻENIE : ustawiając atrybut „class”, należy zawsze używać cudzysłowów!

Z dokumentacji jQuery (wrzesień 2016) dla .attr :

Próba zmiany atrybutu type w elemencie wejściowym lub przycisku utworzonym za pomocą funkcji document.createElement () spowoduje zgłoszenie wyjątku w przeglądarce Internet Explorer 8 lub starszej.

Edycja :
do wykorzystania w przyszłości ... Aby uzyskać pojedynczy atrybut, którego użyjesz

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

Aby ustawić pojedynczy atrybut, którego użyjesz

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

Aby ustawić wiele atrybutów, musisz opakować wszystko w {...}

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

Edytuj - jeśli próbujesz pobrać / ustawić atrybut „zaznaczony” z pola wyboru ...

Będziesz musiał używać prop() jQuery 1.6+

metoda .prop () zapewnia sposób jawnego pobierania wartości właściwości, podczas gdy .attr () pobiera atrybuty.

... najważniejszą koncepcją do zapamiętania w przypadku zaznaczonego atrybutu jest to, że nie odpowiada on sprawdzanej właściwości. W rzeczywistości atrybut odpowiada właściwości defaultChecked i powinien być używany tylko do ustawiania początkowej wartości pola wyboru. Wartość zaznaczonego atrybutu nie zmienia się wraz ze stanem pola wyboru, podczas gdy zaznaczona właściwość tak

Aby więc uzyskać status zaznaczonego pola wyboru, powinieneś użyć:

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

Lub, aby ustawić pole wyboru jako zaznaczone lub niezaznaczone , użyj:

$('#checkbox1').prop('checked', true); // To check it
$('#checkbox1').prop('checked', false); // To uncheck it
Adam Tomat
źródło
1
Aha! Ok, właśnie o tym mówiłem. Dzięki za wyjaśnienie, dlatego wybrałem twoją odpowiedź zamiast Dereka. Dzięki Adam. PS. Przyjmuję twoją odpowiedź za 7 minut, nie pozwala mi jej teraz zaakceptować.
Ricardo Zea
Poprawka: możesz zmienić atrybut typu w IE, jeśli element jest nowo utworzony i jeszcze nie został dodany do DOM.
Akash Kava
Aby ustawić wiele atrybutów, musisz zawinąć wszystko w {...} ... Czy klucze nie muszą być w cudzysłowie?
Gcamara14
27

właściwy sposób to:

.attr({target:'nw', title:'Opens in a new window'})
Derek
źródło
9

Jeśli chcesz dynamicznie dodać atrybuty bootstrap w tagu kotwicy, to bardzo ci pomoże

 $(".dropdown a").attr({
      class: "dropdown-toggle",
     'data-toggle': "dropdown",
      role: "button",
     'aria-haspopup': "true",
     'aria-expanded': "true"
});
Tejas Soni
źródło
2

Coś takiego:

$(myObj).attr({"data-test-1": num1, "data-test-2": num2});
Jaydeep Patel
źródło
1

Użyj nawiasów klamrowych i umieść w środku wszystkie atrybuty, które chcesz dodać

Przykład:

$('#objId').attr({
    target: 'nw',
    title: 'Opens in a new window'
});
javaprodigy
źródło
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
źródło
Dzięki za odpowiedź. Czy możesz wyjaśnić swój kod lub dodać jego działanie demo?
Ricardo Zea