jQuery: การเพิ่มสองแอตทริบิวต์โดยใช้ .attr (); วิธี


106

แก้ไข:

ฉันได้เรียนรู้ว่าการใช้ค่าอื่นนอกเหนือจาก_blankนั้นใช้ไม่ได้กับเบราว์เซอร์มือถือเพื่อเปิดหน้าต่าง / แท็บใหม่

ตัวอย่างเช่นหากคุณต้องการเปิดหน้าต่าง / แท็บใหม่:

  • นี้ทำงานtarget="_blank"บนเบราว์เซอร์ทั้งหมดแม้เบราว์เซอร์บนมือถือ:

  • นี้ไม่ได้ทำงานบนเบราว์เซอร์มือถือ แต่มันไม่ทำงานtarget="new"บนเบราว์เซอร์สก์ท็อป:

-

แม้ว่าฉันจะใช้งานได้ แต่ฉันไม่แน่ใจว่ามีวิธีที่ดีกว่านี้หรือไม่หรือวิธีที่ฉันได้รับนั้นเป็นวิธีที่ถูกต้อง / วิธีเดียว

โดยพื้นฐานแล้วสิ่งที่ฉันทำคือการแทนที่ค่าtarget="_new"หรือtarget="_blank"แอตทริบิวต์ทั้งหมดtarget="nw"ด้วยวิธีนี้จะเปิดหน้าต่างใหม่เพียงหน้าต่างเดียวและหน้าต่างใหม่อื่น ๆ ทั้งหมดจะเปิดขึ้นเพื่อไม่ให้ผู้ใช้ล้นหลามด้วยหลายหน้าต่าง

ฉันยังเพิ่มแอตทริบิวต์" เปิดในหน้าต่างใหม่ "title=""

ดังนั้นวิธีแก้ปัญหาที่ฉันสร้างขึ้นคือสิ่งนี้:

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

สังเกตสอง.attr();วิธี

นี่เป็นวิธีที่ถูกต้องในการเพิ่มแอตทริบิวต์สองรายการให้กับองค์ประกอบหรือไม่

ฉันพยายาม.attr('target','nw','title','Opens in a new window')แล้วแต่มันไม่ได้ผล

เหตุผลที่ฉันถามเป็นเพราะหลักการ DYR (อย่าทำซ้ำตัวเอง) ดังนั้นถ้าฉันสามารถปรับปรุงรหัสที่ฉันมีได้ก็ยิ่งดีถ้าไม่เป็นเช่นนั้นมันคืออะไร

ขอบคุณ.


@zzzzBov ใช่คุณพูดถูกขอบคุณสำหรับข้อมูล
Ricardo Zea

ฉันต้องการตั้งค่าแอตทริบิวต์สองรายการให้มีค่าเท่ากันดังนั้นจึง.attr('a,b','value')ไม่ได้ผล ฉันก็ตัดสินใจ.attr('a',1).attr('b',1)เช่นกัน การพึ่งพา windows ใหม่น้อยลงอาจเป็นอีกแนวทางหนึ่งในกรณีของคุณ @ricardozea: P
Alastair

คำตอบ:


231

ควรทำงาน:

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

หมายเหตุ :

" เมื่อตั้งค่าหลายแอตทริบิวต์คำพูดรอบชื่อแอตทริบิวต์เป็นทางเลือก

คำเตือน : เมื่อตั้งค่าแอตทริบิวต์ "class" คุณต้องใช้เครื่องหมายคำพูดเสมอ!

จากเอกสาร jQuery (ก.ย. 2016) สำหรับ . attr :

ความพยายามที่จะเปลี่ยนแอตทริบิวต์ type ในองค์ประกอบอินพุตหรือปุ่มที่สร้างผ่าน document.createElement () จะทำให้เกิดข้อยกเว้นใน Internet Explorer 8 หรือเก่ากว่า

แก้ไข :
สำหรับการอ้างอิงในอนาคต ... หากต้องการรับแอตทริบิวต์เดียวที่คุณจะใช้

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

ในการตั้งค่าแอตทริบิวต์เดียวคุณจะใช้

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

ในการตั้งค่าแอตทริบิวต์หลายรายการคุณต้องรวมทุกอย่างไว้ใน {... }

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

แก้ไข - หากคุณกำลังพยายามรับ / ตั้งค่าแอตทริบิวต์ "ตรวจสอบ" จากช่องทำเครื่องหมาย ...

คุณจะต้องใช้prop() ตั้งแต่ jQuery 1.6+

วิธีการ. prop () จัดเตรียมวิธีการดึงค่าคุณสมบัติอย่างชัดเจนในขณะที่ .attr () ดึงแอ็ตทริบิวต์

... แนวคิดที่สำคัญที่สุดที่ต้องจำเกี่ยวกับแอตทริบิวต์ที่ตรวจสอบคือไม่สอดคล้องกับคุณสมบัติที่ตรวจสอบ แอตทริบิวต์สอดคล้องกับคุณสมบัติ defaultChecked และควรใช้เพื่อตั้งค่าเริ่มต้นของช่องทำเครื่องหมายเท่านั้น ค่าแอ็ตทริบิวต์ที่ตรวจสอบจะไม่เปลี่ยนแปลงตามสถานะของช่องทำเครื่องหมายในขณะที่คุณสมบัติที่เลือกทำ

ดังนั้นในการรับสถานะการตรวจสอบของช่องทำเครื่องหมายคุณควรใช้:

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

หรือหากต้องการตั้งค่าช่องทำเครื่องหมายเป็นเลือกหรือไม่เลือกคุณควรใช้:

$('#checkbox1').prop('checked', true); // To check it
$('#checkbox1').prop('checked', false); // To uncheck it

1
อ๊าาา! ตกลงนี่คือสิ่งที่ฉันกำลังอ้างถึง ขอบคุณสำหรับคำอธิบายนั่นคือเหตุผลที่ฉันเลือกคำตอบของคุณมากกว่า Derek ขอบคุณอดัม ปล. ฉันจะยอมรับคำตอบของคุณใน 7 นาทีตอนนี้ฉันยังไม่ยอมรับคำตอบ
Ricardo Zea

การแก้ไข: คุณสามารถเปลี่ยนแอตทริบิวต์ประเภทใน IE ได้หากองค์ประกอบถูกสร้างขึ้นใหม่และยังไม่ได้เพิ่มลงใน DOM
Akash Kava

ในการตั้งค่าแอตทริบิวต์หลายรายการคุณต้องรวมทุกอย่างใน {... } ... คีย์ไม่จำเป็นต้องอยู่ในเครื่องหมายคำพูดหรือ?
Gcamara14


9

หากคุณจะเพิ่มแอตทริบิวต์ bootstrap ใน anchor tag แบบไดนามิกมากกว่านี้จะช่วยคุณได้มาก

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


1

ใช้วงเล็บปีกกาและใส่แอตทริบิวต์ทั้งหมดที่คุณต้องการเพิ่มเข้าไป

ตัวอย่าง:

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

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"},
];

ขอบคุณสำหรับการตอบกลับของคุณ. คุณช่วยอธิบายรหัสของคุณหรือเพิ่มการสาธิตการใช้งานได้หรือไม่?
Ricardo Zea
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.