Đặt thuộc tính không có giá trị

194

Làm cách nào để đặt thuộc tính dữ liệu mà không cần thêm giá trị trong jQuery? Tôi muốn điều này:

<body data-body>

Tôi đã thử:

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

Mọi thứ khác dường như thêm các đối số thứ hai dưới dạng một chuỗi. Có thể chỉ đặt một thuộc tính không có giá trị?

— David Hellsing
nguồn

3

Tại sao bạn cần data-bodyso với data-body=""?

— Thuốc nổ

Ít nhất nếu bạn muốn sử dụng XHTML, bạn không nên làm điều đó vì tối thiểu hóa thuộc tính không được phép.

— Matthias

9

Tôi không sử dụng XHTML, tôi sử dụng HTML5

— David Hellsing

2

@ user1689607 vì tôi đang lưu HTML được tạo dưới dạng chuỗi và cần thực hiện tra cứu ngược lại sau này.

— David Hellsing

4

@ExplumpingPills Một ví dụ là requiredthuộc tính để xác thực mẫu HTML5. Tôi chắc chắn có nhiều trường hợp sử dụng hợp lệ khác.

— Zero3

250

Các attr()chức năng cũng là một hàm setter. Bạn chỉ có thể truyền cho nó một chuỗi rỗng.

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

Một chuỗi rỗng sẽ chỉ đơn giản là tạo thuộc tính không có giá trị.

<body data-body>

Tham khảo - http://api.jquery.com/attr/#attr-attributionName-value

attr (tên thuộc tính, giá trị)

— Lix
nguồn

24

+1, nhưng OP biết đó là một setter. Thực tế là việc truyền một chuỗi rỗng hoạt động nhưng nullkhông có gì đáng ngạc nhiên.

— Jon

2

Javasctipt có một số hành vi kỳ lạ . Biết nơi những điều kỳ lạ này xảy ra sẽ loại bỏ yếu tố đầu hàng: P

— Lix

25

Lưu ý: Điều này không hoạt động với jQuery 1.7.2 (Tôi biết đó không phải là phiên bản mới nhất) nhưng sử dụng $(el).prop('data-body', true)cho tôi khi $(el).attr('data-body', '')kết thúc cài đặt data-body = "data-body" cho tôi.

— Patrick O'Doherty

6

@ PatrickO'Doherty $(el).prop('data-body', true)không làm việc cho tôi. attr()không hoạt động nhưng nó cũng thêm một chuỗi rỗng làm giá trị của thuộc tính tôi muốn thêm.

— Webdevotion

1

@Andrew Tôi tin rằng bạn đang tìm kiếm các hàm removeAttr / prop . Nó phụ thuộc vào thuộc tính nào bạn đang cố gắng loại bỏ.

— Lix

47

Có lẽ hãy thử:

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

— Callum
nguồn

2

Chỉ có giải pháp này hiệu quả với tôivar btn = $(this).get(0); btn.setAttribute("disabled","");

— gkiko

1

Sau khi tìm hiểu kỹ về bình luận ở trên ... Chúc mừng cho điều đó!

— TheCuBeMan

22

Các câu trả lời được chấp nhận không tạo ra một thuộc tính tên chỉ nữa (tính đến tháng 9 năm 2017).

Bạn nên sử dụng phương thức JQuery prop () để tạo các thuộc tính chỉ có tên.

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

— Charlie
nguồn

Trên thực tế, tôi dường như đang thêm "value = 'true'" vào tùy chọn đã chọn của mình, thay vì chỉ "giá trị". Ừ

— RonLugge

tôi đã tự hỏi làm thế nào câu trả lời được chấp nhận không chứa giải pháp này! đó là cách sạch nhất bằng cách sử dụng jquery.

— denns

Không hoạt động trong các tùy chọn thả xuống được chọn, trong Chrome không may

— MC9000

7

Bạn có thể làm điều đó mà không cần jQuery!

Thí dụ:

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

<button>My disabled button!</button>

Mở rộng đoạn trích

Để đặt giá trị của thuộc tính Boolean, chẳng hạn như bị tắt, bạn có thể chỉ định bất kỳ giá trị nào. Một chuỗi rỗng hoặc tên của thuộc tính là các giá trị được đề xuất. Tất cả vấn đề là nếu thuộc tính có mặt, bất kể giá trị thực của nó, giá trị của nó được coi là đúng. Sự vắng mặt của thuộc tính có nghĩa là giá trị của nó là sai. Bằng cách đặt giá trị của thuộc tính bị vô hiệu thành chuỗi trống (""), chúng tôi đang đặt bị vô hiệu hóa thành true, dẫn đến nút bị vô hiệu hóa.

Từ MDN Element.setAttribution ()

— Môi
nguồn

1

jQuery là quá hoàn hảo về vấn đề này. Tốt nhất nên làm trong javascript kẻo bạn tự làm mình phát điên mỗi khi jquery hoặc trình duyệt thay đổi. Điều này đi cho tất cả các khung khách hàng lỗi.

— MC9000

1

Không chắc chắn nếu điều này thực sự có lợi hay tại sao tôi thích phong cách này nhưng những gì tôi làm (trong vanilla js) là:

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

Điều này sẽ thêm thuộc tính trong tất cả các chữ thường mà không có giá trị hoặc loại bỏ nó nếu nó đã tồn tại trên phần tử.

https://developer.mozilla.org/en-US/docs/Web/API/Euity/toggleAttribution

— Brent N
nguồn