ตั้งค่าแอตทริบิวต์โดยไม่มีค่า

194

ฉันจะตั้งค่า data data โดยไม่ต้องเพิ่มค่าใน jQuery ได้อย่างไร ฉันต้องการสิ่งนี้:

<body data-body>

ฉันเหนื่อย:

$('body').attr('data-body'); // this is a getter, not working
$('body').attr('data-body', null); // not adding anything

ทุกอย่างอื่นดูเหมือนว่าจะเพิ่มข้อโต้แย้งที่สองเป็นสตริง เป็นไปได้ไหมที่จะตั้งค่าแอตทริบิวต์โดยไม่มีค่า?

— David Hellsing
แหล่งที่มา

3

ทำไมคุณต้องdata-bodyเทียบกับdata-body=""?

— ยาระเบิดใน

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

— แมทเทียส

9

ฉันไม่ได้ใช้ XHTML ฉันใช้ HTML5

— David Hellsing

2

@ user1689607 เนื่องจากฉันบันทึก HTML ที่สร้างเป็นสตริงและต้องทำการค้นหาแบบย้อนกลับในภายหลัง

— เดวิดเฮลล์ซิงก์

4

@ExplosionPills ตัวอย่างหนึ่งคือrequiredแอตทริบิวต์สำหรับการตรวจสอบความถูกต้องของแบบฟอร์ม HTML5 ฉันแน่ใจว่ามีอีกหลายกรณีการใช้ที่ถูกต้อง

— Zero3

251

attr()ฟังก์ชั่นนี้ยังมีฟังก์ชั่นหมา คุณสามารถผ่านมันเป็นสตริงว่าง

$('body').attr('data-body','');

สตริงว่างเปล่าก็จะสร้างคุณลักษณะที่ไม่มีค่า

<body data-body>

การอ้างอิง - http://api.jquery.com/attr/#attr-attributeName-value

attr (attributeName ค่า)

— Lix
แหล่งที่มา

24

+1 แต่ OP รู้ว่ามันเป็น setter ความจริงที่ว่าการส่งผ่านสตริงว่างทำงานได้ แต่nullไม่น่าแปลกใจเลย

— Jon

2

Javasctipt มีพฤติกรรมบางลาง การรู้ว่าสิ่งแปลกประหลาดเหล่านี้เกิดขึ้นที่ไหนจะนำเอาองค์ประกอบของความประหลาดใจ: P

— Lix

25

หมายเหตุ: วิธีนี้ใช้ไม่ได้กับ jQuery 1.7.2 (ฉันรู้ว่าไม่ใช่รุ่นล่าสุด) แต่การใช้$(el).prop('data-body', true)งานได้สำหรับฉันเมื่อ$(el).attr('data-body', '')สิ้นสุดการตั้งค่า data-body = "data-body" สำหรับฉัน

— Patrick O'Doherty

6

@ PatrickO'Doherty $(el).prop('data-body', true)ไม่ได้ผลสำหรับฉัน attr()ทำงานได้ แต่มันยังเพิ่มสตริงว่างเป็นค่าของคุณสมบัติที่ฉันต้องการเพิ่ม

— Webdevotion

1

@Andrew ฉันเชื่อว่าคุณกำลังมองหาฟังก์ชั่นremoveAttr / prop ขึ้นอยู่กับแอตทริบิวต์ที่คุณพยายามลบ

— Lix

47

อาจลอง:

var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");

— Callum McLean
แหล่งที่มา

2

วิธีแก้ปัญหานี้ใช้ได้สำหรับฉันเท่านั้นvar btn = $(this).get(0); btn.setAttribute("disabled","");

— gkiko

1

หลังจาก messing รอบกับ. atr และ. prop เช่นแนะนำในโซลูชันอื่น ๆ และความคิดเห็นที่นี่ในที่สุดฉันก็พบว่าการย้อนกลับ (หรืออย่างน้อย "ครึ่งทาง" กลับ) เพื่อพื้นเมือง JS ทำเคล็ดลับเช่นแนะนำใน ความคิดเห็นด้านบน ... ไชโยสำหรับสิ่งนั้น!

— TheCuBeMan

22

คำตอบที่ได้รับการยอมรับไม่ได้สร้างชื่ออย่างเดียวอีกต่อไปแอตทริบิวต์ ( ณ กันยายน 2017)

คุณควรใช้วิธี JQuery prop ()เพื่อสร้างคุณสมบัติเฉพาะชื่อ

$(body).prop('data-body', true)

— ชาร์ลี
แหล่งที่มา

ที่จริงแล้วฉันดูเหมือนจะเพิ่ม "value = 'true'" ในตัวเลือกการเลือกของฉันแทนที่จะเป็นเพียงแค่ "ค่า" ฮึ.

— RonLugge

ฉันสงสัยว่าคำตอบที่ยอมรับนั้นไม่มีโซลูชันนี้ได้อย่างไร! มันเป็นวิธีที่สะอาดที่สุดในการใช้ jQuery

— denns

ใช้งานไม่ได้กับตัวเลือกแบบเลื่อนลงบางรายการใน Chrome น่าเสียดาย

— MC9000

7

คุณสามารถทำได้โดยไม่ต้อง jQuery!

ตัวอย่าง:

document.querySelector('button').setAttribute('disabled', '');

<button>My disabled button!</button>

ขยายตัวอย่างข้อมูล

ในการตั้งค่าของคุณสมบัติบูลีนเช่นปิดใช้งานคุณสามารถระบุค่าใดก็ได้ สตริงว่างหรือชื่อของแอตทริบิวต์เป็นค่าที่แนะนำ สิ่งที่สำคัญคือถ้ามีแอตทริบิวต์อยู่เลยไม่ว่ามูลค่าจริงจะเป็นมูลค่าจริงก็ตาม การไม่มีแอตทริบิวต์หมายความว่าค่าเป็นเท็จ โดยการตั้งค่าของคุณลักษณะที่ปิดใช้งานเป็นสตริงว่าง ("") เรากำลังตั้งค่าปิดใช้งานเป็นจริงซึ่งจะส่งผลให้ปุ่มถูกปิดใช้งาน

จากMDN Element.setAttribute ()

— LipESprY
แหล่งที่มา

1

jQuery ไม่สุภาพเกินไปในเรื่องนี้ ที่ดีที่สุดที่จะทำในจาวาสคริปต์เพื่อมิให้คุณบ้าคลั่งทุกครั้งที่เปลี่ยน jQuery หรือเบราว์เซอร์ สิ่งนี้เป็นไปตามกรอบงานไคลเอนต์ buggy เหล่านี้ทั้งหมด

— MC9000

1

ไม่แน่ใจว่าสิ่งนี้มีประโยชน์จริงๆหรือทำไมฉันถึงชอบสไตล์นี้ แต่สิ่งที่ฉันทำ (ใน vanilla js) คือ:

document.querySelector('#selector').toggleAttribute('data-something');

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

https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

— Brent N.
แหล่งที่มา