オブジェクト配列を展開してアコーディオン

naokichick

2010-09-03 19:36:50

License: MIT License

Fork: 4

Fav: 0

View: 3011

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 29 lines
HTML 1 lines
CSS 24 lines

もっと良い書き方があったら教えてください。
9/3　19:08 追記
ミスってコード消しちゃったので書き直しました

オブジェクト配列を展開してアコーディオン
jQuery v1.4.2

オブジェクト配列を展開してアコーディオン

もっと良い書き方があったら教えてください。 9/3　19:08 追記ミスってコード消しちゃったので書き直しましたvar users = [ {userId:"11111", name:"hoge tarou"}, {userId:"22222", name:"fuga hanako"}, {userId:"33333", name:"piyo jirou"} ]; $.each(users, function(i, user){ $("<div class='user'></div>").attr("id", user.userId).appendTo($("#container")) //.title .append( $("<div class='title'></div>").text("ID:" + user.userId).click(function(){ $(this).next().toggle(); }).append( $("<a href='#'>delete</a>").click(function(){ var root = $(this).parent().parent(); alert("delete/userId=" + root.attr("id")); root.hide("slow"); return false; }) ) ) //.content .append( $("<div class='content'></div>").text(user.name).css("display","none") ); }); <div id="container"></div>body { background-color: #DDDDDD; font: 30px sans-serif; } div { border: 1px solid black; margin: 5px; } div.user { background-color: #FFFFFF; } div.title { background-color: #FFDDDD; } div.content { background-color: #DDFFDD; } a { font-size: 20px; margin-left: 10px; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/wFtE/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/naokichick/wFtE" title="オブジェクト配列を展開してアコーディオン">オブジェクト配列を展開してアコーディオン - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code