7

私はjqueryのもののために、私のhtmlでいくつかのカスタム属性を使用します。HTML5には属性があるのを見ましたがdata-XYZ、xhtml1.0に厳密である必要があります。他にどのようなオプションがありますか？

4

6 に答える 6

5

jQuery MetaDataプラグインを使用すると、JSON形式でクラス属性にデータを書き込むことができます。

<li class="someclass {some: 'data'} anotherclass">...</li>

次に、jQueryで、データを取得します。

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'data' )
    alert('It Worked!');

これは、xhtml 1.0に厳密であるという要件を満たしている必要があり、プラグアンドプレイソリューションを使用することもできます:)

于 2010-11-23T09:31:18.507 に答える
1

いくつかのオプションが思い浮かびます。

スクリプトで使用するサイト固有のカスタム属性が必要であると仮定すると、1 つの方法は、属性を追加する要素にスクリプトを埋め込むことです。例えば：

  <span id="myId1"><script type="text/javascript">
      var myId1Span = document.getElementById("myId1");
      myId1Span.myData = {};
      myId1Span.myData.firstname = "John";
      myId1Span.myData.surname = "Smith";
  </script>My Text</span>

要素にデータを追加するもう 1 つの方法は、クラス属性にデータを埋め込むことです。

だから、あなたが持つことができます

<span class="myCssClass http://example.com/hasData 
                data-firstname:John data-surname:Smith">My Text</span>

スクリプトにデータを使用している場合は、以下のスクリプトを追加してこのデータを抽出できます。これは body タグの直前に追加できます。

  <script type="text/javascript">
      //<![CDATA[
      if (! document.getElementsByClassName)
      {
        // From http://lawrence.ecorp.net/inet/samples/js-getelementsbyclassname.shtml
        document.getElementsByClassName = function(class_name)
        {
          var docList = this.all || this.getElementsByTagName('*');
          var matchArray = new Array();

          var re = new RegExp("(?:^|\\s)"+class_name+"(?:\\s|$)");
          for (var i = 0; i < docList.length; i++)
          {
            if (re.test(docList[i].className) )
            {
              matchArray[matchArray.length] = docList[i];
            }
          }
          return matchArray;
        }
      }

      var hasData = document.getElementsByClassName("http://example.com/hasData");
      for (var i = 0 ; i < hasData.length ; i++)
      {
        var myElem = hasData[i];
        myElem.myData = {};
        var dataClassList = myElem.className.split(" ");
        for (var j = 0 ; j < dataClassList.length ; j++)
        {
          var dataCandidate = dataClassList[j];
          if (dataCandidate.substring(0, 5) == "data-")
            if (dataCandidate.indexOf(":") >= 0)
            { 
              var nameValue = dataCandidate.split(":", 2);
              myElem.myData[nameValue[0].substring(5)] = nameValue[1];
            }
        }
      }
      //]]>
  </script>

これにより、最初のオプションと同じmyDataオブジェクトがスパンに追加されます。

http://example.com/hasDataクラスは、どの要素を処理する必要があるかを示す単なるフラグです。この目的には、好きな文字列を使用できます。

どちらのメソッドも XHTML 1.0 Strict に準拠しており、text/htmlまたはとして提供された場合に機能します。application/xhtml+xml

于 2010-11-21T12:56:47.457 に答える
0

厳密な仕様で要素にデータを追加する方法が許可されているかどうかを知りたいだけです。

いいえ。

（気にかけるべきですか？おそらくそうではありませんが、それがあなたの呼びかけです。）

于 2010-11-20T21:13:33.053 に答える
-2

適切な XHTML が必要な場合は、HTML5 doctype ( <!doctype html>) を使用する必要があります。data-その後、属性を使用できます。

<element data-usage='for an example' data-number='28' />

これは完全に有効な XHTML strict です (私はこれを自分の Web サイトで使用しています)。これの目的は、W3C がやってきて、Web サイトで使用していたものと同じ名前の属性を作成して壊さないようにすることです。

JavaScript で値を取得するには、 を使用する必要がありますelem.getAttribute('data-name');。W3M 仕様には using が含まれていますele.dataset.nameが、これはまださまざまなブラウザーでサポートされていません。

于 2010-11-25T23:58:35.873 に答える
-2

私がそれを見る方法は、とにかく実際のxhtmlではないので、私がそれを提供している場合、XHTML仕様に従って有効かどうかはあまり気にしません。これは、xhtml の使用の 99% に当てはまります。text/html

終了タグの欠落などの重大なエラーがない限り、その理由を認識している限り、必ずしもバリデーターが教えてくれることを心配する必要はありません。XHTML 1.0 仕様は何年も前に書かれました。テクノロジーは急速に進歩しています。仕様の作成時にサイトを「有効」にするように制限すると、新しい機能を使用できなくなります。

私の本当の提案は、HTML 5 に切り替えることですが、xhtml 構文の AFAIK は HTML 5 と互換性があります。多少の矛盾があるかもしれませんが、ほとんどの場合、かなり簡単な移行になるはずです。

于 2010-11-15T21:41:25.820 に答える