5

私は現在、HTML 5、CSS、およびJQueryを使用するWebアプリケーションに取り組んでいます。ページリンクを表示するための順序付けられていないリスト（ul）があり、各li要素にページリンクが含まれています。このリストは、jQueryを使用して動的に作成されます。

私がやりたいのは、リスト要素にリンク内のページ名のみを表示させ、同時に完全なリンクパスを保持させることです。たとえば、「http://www.foo.com/xyz/contactus」は「contactus」と表示されますが、li要素はフルリンクパスを「認識」します。この目的のために、liのvalue属性は、次のように設定できるため、完璧でした。

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);
    }

これにより、次のようなリストが作成されます。

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

残念ながら、liのvalue属性はHTML 4.01以降非推奨になっています（この背後にある理論的根拠を知っている人はいますか？私にはかなり役立つようです...）。

それでは、進め方についてアドバイスをお願いします。1つのオプションは、非推奨を無視し、とにかくvalue属性を使用することです。これは、すべての主要なブラウザーが引き続きサポートしているためですが、非推奨の機能を使用することにあまり熱心ではなく、それは単に間違っていると感じます。

何か案は？

4

3 に答える 3

10

から変更する：

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

に：

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

data-*パターンは、DOM要素に値を保持する新しいHTML5の方法です。

次の2つの方法のいずれかで値を取得できます。

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

これらの属性については、JohnResigのこのブログ投稿を読むことができます。

jQuerydata関数

于 2012-05-24T07:24:29.667 に答える
3

data属性を使用するだけです（イントロ;長いチュートリアル;スペック）：

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

さらに、jQueryは、メソッドを介してそのような属性の値を便利に検出して公開します.data。

于 2012-05-24T07:24:24.033 に答える
1

非推奨になりましvalueたが、JavaScriptを使用して使用およびアクセスできました。あなたは検証ステータスをあきらめているだけです！

または、属性を使用するかdata-*（他の人が提案しているように）、値をDOM要素に直接マップすることもできます-実行時にこのマークアップを生成するので、そのようなプロパティを追加するだけで済みます（これを可能にするJSは両方の祝福ですと呪い）：

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

それでも...これをナビゲーションに使用する場合は、hrefでアンカーを使用してみませんか？

于 2012-05-24T07:31:45.640 に答える