匿名質問者

dtの部分をクリックしたらddの部分が編集出来るようにしたい

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

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/10/10 09:10:25

ベストアンサー

匿名回答2号 No.1

 メソッドチェーンよりも、ネストが深いことが可読性を低くしていますね。
 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');
    });
});
  • 匿名回答1号
    匿名回答1号 2013/10/06 08:12:24
    メソッドチェーンだってわかってるんだったら、.click をひとつ前の要素に対して行うだけではないの。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません