Nhận giá trị được mở rộng bằng aria

Question

Tôi không tìm được cách để lấy giá trị được mở rộng aria từ DOM.

<a class="accordion-toggle collapsed" href="#collapse-One" data-parent="#accordion-1" data-toggle="collapse" aria-expanded="false"> 
    <i class="fa fa-search-plus"></i> 
    test 
</a> 

Tôi muốn thử nghiệm nếu nó true sau đó tôi có thể thay đổi <i> lớp để fa-search-minus. Tôi cố gắng này, nhưng tôi luôn luôn nhận được một giá trị không xác định:

console.log($(this).find('a.aria-expanded').val()); 

Answer 1

aria-expanded là một thuộc tính trên phần tử, không phải là một lớp, vì vậy chọn là không chính xác. Thứ hai, bạn nên sử dụng hàm attr() để lấy giá trị của thuộc tính đó. val() nhằm truy xuất thuộc tính value từ các yếu tố liên quan đến biểu mẫu, chẳng hạn như input và textarea. Hãy thử điều này:

console.log($(this).find('a[aria-expanded]').attr('aria-expanded')); 

Answer 2

Bạn có thể sử dụng JavaScript để đạt được điều này:

document.getElementsByTagName('a')[0].attributes[4].value 

Từng bước giải thích:

1. Lấy yếu tố truy nã, bằng cách sử dụng một số chọn - ở đây tôi sử dụng the

   document.getElementsByTagName('a')[0] 
   

nhưng bạn có thể sử dụng bất kỳ bộ chọn nào khác mà bạn thích.

2. Truy cập mảng thuộc tính của phần tử và tìm vị trí của thuộc tính mong muốn - trong trường hợp này sẽ là 4, vì aria-expanded là thuộc tính thứ 5 của thẻ.
3. Từ đó bạn chỉ nhận được giá trị và điều đó sẽ cho bạn "sai" (trong trường hợp này).

Vấn đề duy nhất với phương pháp này là nó hơi khó mã hóa, vì vậy nếu bạn thêm một số thuộc tính vào thẻ, vị trí trong mảng thuộc tính cho thuộc tính mở rộng aria có thể thay đổi.