人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

dtの部分をクリックしたらddの部分が編集出来るようにしたい
http://image.gihyo.co.jp/assets/files/design/serial/01/jquery-site-production/0017/demo17-8.html
メソッドチェーンで書かれてあってよく分からないのでできれば分かりやすく教えていただけると嬉しいです。

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● 匿名回答2号
ベストアンサー

メソッドチェーンよりも、ネストが深いことが可読性を低くしていますね。
blurイベントの処理を分離して書くと読みやすくなると思います。

jQuery(function($){
 $(document).on('blur','dd > input',function(){
 var inputVal = $(this).val();
 var backup = $(this).parent().data('backup');
 if(inputVal===''){
 inputVal = this.defaultValue;
 };
 $(this).parent().removeClass('on').text(inputVal);
 if(backup !== inputVal){
 $('button').removeAttr('disabled');
 };
 });

 $('dd').each(function(){
 var backup = $(this).text();
 $(this).data('backup',backup)
 .click(function(){
 if(!$(this).hasClass('on')){
 $(this).addClass('on');
 var txt = $(this).text();
 $(this).html('<input type="text" value="'+txt+'" />');
 $('dd > input').focus()
 };
 });
 });
 $('button').attr('disabled','disabled')
 .click(function(){;
 $('dd').each(function(){
 var backup = $(this).data('backup');
 $(this).text(backup);
 });
 $(this).attr('disabled','disabled');
 });
});
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ