1. ホーム
  2. jquery

[解決済み] jQueryのdata()関数は何をするのですか?

2022-03-03 05:14:23

質問

jqueryの関数の使い道がわかりません。 data() . どなたか使用例を教えていただけませんか?

どのように解決するのですか?

DOM要素に様々なオブジェクト、文字列、配列などを関連付けるのに非常に便利です。ここでは、楽しい仮想的な使い方を紹介します。

$(document).ready(function(){
   $("a").each(function(index, el){
      if(index % 2 == 0) 
         $(this).data('coolColor', 'Orange'); // Set the data
      else 
         $(this).data('coolColor', 'Purple'); // Set the data
   }).click(function(e){
      alert($(this).data('coolColor')); // Retrieve the data
      e.preventDefault();
   });
});

この場合、すべての a タグを設定し Orange が奇数の場合、または Purple 偶数なら これは、本当にやりたいことであれば、最適な書き方ではありません。 .data() という関数があります。

また、オブジェクトを格納するために使用することもできます。

$("#header").data('headerSettings',{
   color: "red",
   cost:  "$25.00",
   time:  1000
});

これで、ページ上の他のどこからでもそのデータにアクセスできるようになりました。

$("#header").data('headerSettings').color;