jQuery: Menambahkan dua atribut melalui .attr (); metode

105

EDIT:

Saya belajar bahwa menggunakan nilai selain _blank, TIDAK berfungsi di browser seluler untuk membuka jendela / tab baru.

Misalnya, jika Anda perlu membuka jendela / tab baru:

  • Ini bekerja pada semua browser, bahkan browser mobile: target="_blank".

  • Ini tidak bekerja pada browser mobile, tetapi tidak bekerja pada browser desktop: target="new".

-

Meskipun saya memiliki yang ini berfungsi, saya tidak yakin apakah ada cara yang lebih baik untuk melakukannya, atau apakah cara saya mendapatkannya adalah cara yang benar / satu-satunya.

Pada dasarnya yang saya lakukan adalah mengganti semua target="_new"atau target="_blank"nilai atribut ke target="nw", dengan cara ini hanya satu jendela baru yang terbuka dan di dalamnya semua jendela baru lainnya akan terbuka agar tidak membanjiri pengguna dengan banyak jendela.

Saya juga menambahkan atribut " Buka di jendela baru " title="".

Jadi solusi yang saya buat adalah yang ini:

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

Perhatikan kedua .attr();metode tersebut.

Apakah ini cara yang benar untuk menambahkan dua atribut ke sebuah elemen?

Saya mencoba .attr('target','nw','title','Opens in a new window')tetapi tidak berhasil.

Alasan saya bertanya adalah karena prinsip DYR (Don't Repeat Yourself), jadi jika saya dapat meningkatkan kode yang saya miliki, bagus, jika tidak, maka itu apa adanya.

Terima kasih.

Ricardo Zea
sumber
@zzzzBov, ya, kamu benar, terima kasih atas infonya.
Ricardo Zea
Saya ingin menetapkan dua atribut agar memiliki nilai yang sama sehingga sayang .attr('a,b','value')sekali tidak berfungsi. Aku juga memutuskannya .attr('a',1).attr('b',1). Menjadi kurang bergantung pada jendela baru mungkin menjadi pendekatan lain, dalam kasus Anda, @ricardozea: P
Alastair

Jawaban:

229

Harus bekerja:

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

Catatan :

" Saat menyetel beberapa atribut, tanda kutip di sekitar nama atribut bersifat opsional.

PERINGATAN : Saat menyetel atribut 'class', Anda harus selalu menggunakan tanda kutip!

Dari dokumentasi jQuery (Sep 2016) untuk .attr :

Mencoba mengubah atribut type pada input atau elemen tombol yang dibuat melalui document.createElement () akan memunculkan pengecualian pada Internet Explorer 8 atau yang lebih lama.

Edit :
Untuk referensi di masa mendatang ... Untuk mendapatkan satu atribut yang akan Anda gunakan

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

Untuk mengatur satu atribut yang akan Anda gunakan

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

Untuk menyetel beberapa atribut Anda perlu membungkus semuanya di {...}

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

Edit - Jika Anda mencoba untuk mendapatkan / menyetel atribut 'diperiksa' dari kotak centang ...

Anda harus menggunakan prop() mulai jQuery 1.6+

metode .prop () menyediakan cara untuk mengambil nilai properti secara eksplisit, sementara .attr () mengambil atribut.

... konsep yang paling penting untuk diingat tentang atribut yang dicentang adalah bahwa itu tidak sesuai dengan properti yang dicentang. Atribut sebenarnya sesuai dengan properti defaultChecked dan harus digunakan hanya untuk menyetel nilai awal kotak centang. Nilai atribut yang dicentang tidak berubah dengan status kotak centang, sedangkan properti yang dicentang berubah

Jadi untuk mendapatkan status kotak centang yang dicentang , Anda harus menggunakan:

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

Atau untuk mengatur kotak centang sebagai dicentang atau tidak dicentang Anda harus menggunakan:

$('#checkbox1').prop('checked', true); // To check it
$('#checkbox1').prop('checked', false); // To uncheck it
Adam Tomat
sumber
1
Aha! Ok, ini yang saya maksud. Terima kasih atas penjelasannya, itulah mengapa saya memilih jawaban Anda daripada Derek. Terima kasih Adam. PS. Saya akan menerima jawaban Anda dalam 7 menit, itu tidak mengizinkan saya menerimanya sekarang.
Ricardo Zea
Koreksi: Anda dapat mengubah atribut tipe di IE jika elemen baru dibuat dan belum ditambahkan ke DOM.
Akash Kava
Untuk menyetel beberapa atribut Anda perlu membungkus semuanya di {...} ... Bukankah kunci harus dalam tanda petik?
Gcamara14
27

cara yang tepat adalah:

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

Jika Anda ingin menambahkan atribut bootstrap dalam tag anchor secara dinamis maka ini akan banyak membantu Anda

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

Sesuatu seperti ini:

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

Gunakan tanda kurung kurawal dan letakkan semua atribut yang ingin Anda tambahkan di dalamnya

Contoh:

$('#objId').attr({
    target: 'nw',
    title: 'Opens in a new window'
});
javaprodigy.dll
sumber
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
sumber
Terima kasih untuk balasan Anda. Bisakah Anda menjelaskan kode Anda atau menambahkan demo agar kode berfungsi atau semacamnya?
Ricardo Zea