THE HAM MEDIA BLOG

実はどんな風に動作するのか全然わかっていないjQueryのdata()
このスクリプトの作り方とかその動作の仕方とか
勉強しようといろいろ調べながらサンプル作ろうとしたのですが、
まずは基本すらその動作の仕方よくわかっていない・・・
とりあえずサンプルのスクリプト部分だけも
動作がどんなものになるのか、メモのためにエントリー。

jQuery.data()

あれ？data()ってこんなだったけと思いつつスタート。
（この実験の途中で・・・とあることに気づいたがとりあえずそのまま）

■スクリプト

$("#test1 ul li").click(function(e) {
	var id = jQuery.data(e.target);
	$("#test1 p span").text(id);
});

■プレビュー

まったくよくわかっていないのは、
まずはこの数字はどこでどう取られた数字が返っているのだろう？
クリックされた要素の位置的なものか、それとも48番目ってことか？
わからないと、まず悩む。。。

とりあえずお次。

■スクリプト

$("#test2 button").click(function(e) {
  var adiv = $("div").get(0);
  var value;

  switch ($("#test2 button").index(this)) {
	case 0 :
	  value = jQuery.data(adiv, "blah");
	  break;
	case 1 :
	  jQuery.data(adiv, "blah", "hello");
	  value = "Stored!";
	  break;
	case 2 :
	  jQuery.data(adiv, "blah", 86);
	  value = "Stored!";
	  break;
	case 3 :
	  jQuery.removeData(adiv);
	  value = "Removed!";
	  break;
  }
  $("#test2 span").text("" + value);
});

■プレビュー

もうこの辺で頭が混乱。
DOMにデータを保持するってどういうことなんだろう？？？
それはまぁいいとして、そのDOMってなんでもいいのだろうか・・・
実験したところによるとなんでもよさそうなのですが・・・
いまいちぱっとしておりません。

上記のでいえば、"blah"に該当する部分は、他の文字でもOK。
これが保存しておく部分の名前になるっぽい。

つまり、jQuery.data( elem, name, value )で
（）の中で、（保存する場所、保存する名前、保存する値）
みたいな感じになっているのかなというイメージ。
そしてそこで保存したのを呼び出すのが
jQuery.data( elem, name )で、保存している値を取り出せるということ
・・・という流れでいいのだろうか？
いまいちピンときていない。

■スクリプト

$("#test3 button").click(function(){
	var adiv = $("div").get(0);
	$.data(adiv, "test", { first: 16, last: "pizza!" });
	$("#test3 span:first").text(jQuery.data(adiv, "test").first);
	$("#test3 span:last").text(jQuery.data(adiv, "test").last);
});

■プレビュー

この場合は、divにtestって名前のobjectが保存されて、
その変数に格納されているのは{ first: 16, last: "pizza!" }で、
.firstと、.pizzaでよびだされているということか。

そしていまさらながらここで気づく・・・
これ、古いバージョンの書き方っぽい！？

なんというミス・・・

data()

ってことで新しいほう。

■スクリプト

$("#test4 button").click(function(e) {
  var value;

  switch ($("#test4 button").index(this)) {
    case 0 :
	  value = $("div").data("blah");
	  break;
    case 1 :
	  $("div").data("blah", "hello");
	  value = "Stored!";
	  break;
    case 2 :
	  $("div").data("blah", 86);
	  value = "Stored!";
	  break;
    case 3 :
	  $("div").removeData("blah");
	  value = "Removed!";
	  break;
  }
  $("#test4 span").text("" + value);
});

■プレビュー

結局同じことをしていることはわかったし、
こっちの方がさっきのよりも感覚的に扱いやすい。

$("div")に"blah"って名前でデータ保存しときますってイメージか。

■スクリプト

$("#test5 button").click(function(){
	$("div").data("test", { first: 555, last: "pizza?bread?" });
	$("#test5 span:first").text($("div").data("test").first);
	$("#test5 span:last").text($("div").data("test").last);
});

■プレビュー

今回の理解度は・・・？

最終的にいろいろ変化させてみたりしたんだけど、
結局良くわかっていない部分がかなりある。。。
ってことで今回の理解度20％くらいだろうか。
引き続き勉強しようと思います。