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

naokichick

2010-09-03 19:36:50

License: MIT License

Fork: 4

Fav: 0

View: 2790

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

Tweet
QR code
Embed

Design view
Code view
<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>
zip