Thuộc tính giá trị thay thế (không được chấp nhận) cho các phần tử li

Question

Tôi hiện đang làm việc trên một ứng dụng web bằng cách sử dụng HTML 5, CSS và JQuery. Tôi có một danh sách không có thứ tự (ul) để hiển thị các liên kết trang, với mỗi phần tử li chứa liên kết trang. Danh sách này được tạo động bằng cách sử dụng jQuery.

Điều tôi muốn làm là để các phần tử danh sách chỉ hiển thị tên trang trong liên kết, nhưng đồng thời giữ lại đường dẫn liên kết đầy đủ. Ví dụ: "http://www.foo.com/xyz/contactus" sẽ được hiển thị dưới dạng "liên hệ", nhưng phần tử li vẫn sẽ "biết" đường dẫn liên kết đầy đủ. Với mục đích này thuộc tính giá trị của li sẽ là hoàn hảo, kể từ khi tôi có thể thiết lập chúng như thế này:

var ul = $('<ul/>').attr('id', 'linkList'); 
for (var i = 0; i < linksOnPage.length; i++) // linksOnPage is an array with all the links 
    { 
     var pgName = linksOnPage[i].toString().slice(steps[i].toString().lastIndexOf('/') + 1); 

     // Create list element and append content 
     var li = $('<li/>').text(pgName); // Set the text to the page name 
     li.attr('value', linksOnPage[i].toString()); // Set the value to the full link 

     ul.append(li); 
    } 

Điều này sẽ tạo ra một danh sách như:

<ul> 
    <li value="http://www.foo.com/xyz/contactus">contactus</li> 
    ... 
</ul> 

Thật không may là thuộc tính giá trị của li đã được không được chấp nhận vì HTML 4.01 (có ai biết lý do đằng sau điều này không? Có vẻ khá hữu ích đối với tôi ...).

Vì vậy, tôi muốn một số lời khuyên về cách tiến hành. Một tùy chọn là bỏ qua việc không dùng nữa và sử dụng thuộc tính value anyway, vì tất cả các trình duyệt chính vẫn hỗ trợ nó, nhưng tôi không quan tâm đến việc sử dụng tính năng không dùng nữa và nó chỉ cảm thấy sai.

Bất kỳ ý tưởng nào?

Answer 1

Thay đổi từ:

<li value="http://www.foo.com/xyz/contactus">contactus</li> 

Để:

<li data-value="http://www.foo.com/xyz/contactus">contactus</li> 

data-* mô hình là HTML5 phương pháp mới để giữ giá trị trong phần tử DOM.

Bạn có thể nhận các giá trị trong một trong hai cách sau:

$('#li-Id').data('value'); 
$('#li-Id').attr('data-value'); 

Bạn có thể đọc this blog post of John Resig trên những thuộc tính.

jQuery data function

Answer 2

Đơn giản chỉ cần sử dụng một thuộc tính data (intro; longer tutorial; spec):

<li data-path="http://www.foo.com/xyz/contactus">contactus</li> 

Là một cộng, jQuery thuận tiện phát hiện và đưa ra các giá trị của thuộc tính đó thông qua phương pháp .data.

Answer 3

Mặc dù value đã bị phản đối, nó vẫn có thể được sử dụng và truy cập w/JavaScript. Bạn chỉ từ bỏ trạng thái xác thực! Hoặc bạn có thể sử dụng các thuộc tính data-* (như tôi thấy những người khác đã đề xuất) hoặc ánh xạ trực tiếp giá trị cho các phần tử DOM - vì bạn đang tạo đánh dấu này vào thời gian chạy, bạn chỉ có thể thêm thuộc tính như vậy (JS cho phép bạn làm đây là cả một phước lành và một lời nguyền):

li.someLinkPath = 'some url here'; 
//and in the click handler you could access this as 
this.someLinkPath; 

Vẫn ... nếu bạn dự định sử dụng điều này để điều hướng, tại sao không sử dụng neo với một href?