63610


`.input_edit` または `.input_edit_select`をクリックすると編集できる関数を作成したのですが、  
別々の関数を作るやり方しかわかりませんでした。

`.input_edit` または `.input_edit_select`を別々の関数にはせず、  
１つの関数の中で`input`も`select`の編集できるようにするにはどのようにすればよいのでしょうか。

教えていただけますと大変助かります。

[code]

    $(function() {
      $('.input_edit').click(function() {
        if(!$(this).hasClass('on')) {
          $(this).addClass('on');
          var txt = $(this).text();
          $(this).html('<input type="text" class="form-control" value="'+txt+'" />');
          $('.input_edit > input').focus().blur(function() {
            var inputVal = $(this).val();
            if(inputVal==='') {
              inputVal = this.defaultValue;
            };
            $(this).parent().removeClass('on').text(inputVal);
          });
        };
      });
    });
    
    $(function() {
      $('.input_edit_select').click(function() {
        if(!$(this).hasClass('on')) {
          $(this).addClass('on');
          var txt = $(this).text();
          $(this).html('<select class="form-control"><option selected>A</option><option>B</option><option>C</option></select>');
          $('.input_edit_select > select').focus().blur(function() {
            var inputVal = $(this).val();
            if(inputVal==='') {
              inputVal = this.defaultValue;
            };
            $(this).parent().removeClass('on').text(inputVal);
          });
        };
      });
    });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="box-body">
       <table class="table">
        <thead>
           <tr>
            <th>用途</th>
            <th>選択肢</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="input_edit">テスト</td>
            <td class="input_edit_select">A</td>
          </tr>
         </tbody>
       </table>
     </div>
[/code]


CC BY-SA 4.0
2020-03-05T10:04:25.787
63600
2020-03-05T12:22:02.073
2020-03-05T10:15:52.843
3060
35901
question
javascript jquery
2つの関数を１つの関数にまとめる書き方を教えてください


それぞれの関数を見比べると、共通していない部分は

  * `html` メソッドの引数
  * 指定するセレクタ

の 2 つであることがわかります。

`html` メソッドの引数は色々な要素が入ることを想定し、関数の引数とすることで `input`, `select`
要素のどちらにも対応出来ます。指定するセレクタに関しては、 `.input_edit_select > input`,
`.input_edit_select > select` と書かれていますが、これらは次の疑似コード
`$(this).children(htmlメソッドで挿入した要素の名前)` と同じ処理をしていると考えることが出来ます。

よって、質問文のコードは以下のように書くことが出来ます。

[code]

    function replace(formControl) {
      if ($(this).hasClass('on')) return;
      var tagName = $(formControl).prop("tagName");
      $(this).addClass('on').html(formControl);
      $(this).children(tagName).focus()
        .blur(function() {
          var inputVal = $(this).val();
          if (inputVal === '') inputVal = this.defaultValue;
          $(this).parent().removeClass('on').text(inputVal);
        });
    }
    
    $(function() {
      $('.input_edit').click(function() {
        var txt = $(this).text();
        var input = '<input type="text" class="form-control" value="' + txt + '" />';
        replace.call(this, input);
      });
    
      $('.input_edit_select').click(function() {
        var select = '<select class="form-control"><option selected>A</option><option>B</option><option>C</option></select>';
        replace.call(this, select);
      });
    });
    
[/code]

[code]

    function replace(formControl) {
      if ($(this).hasClass('on')) return;
      var tagName = $(formControl).prop("tagName");
      $(this).addClass('on').html(formControl);
      $(this).children(tagName).focus()
        .blur(function() {
          var inputVal = $(this).val();
          if (inputVal === '') inputVal = this.defaultValue;
          $(this).parent().removeClass('on').text(inputVal);
        });
    }
    
    $(function() {
      $('.input_edit').click(function() {
        var txt = $(this).text();
        var input = '<input type="text" class="form-control" value="' + txt + '" />';
        replace.call(this, input);
      });
    
      $('.input_edit_select').click(function() {
        var select = '<select class="form-control"><option selected>A</option><option>B</option><option>C</option></select>';
        replace.call(this, select);
      });
    });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="box-body">
      <table class="table">
        <thead>
          <tr>
            <th>用途</th>
            <th>選択肢</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="input_edit">テスト</td>
            <td class="input_edit_select">A</td>
          </tr>
        </tbody>
      </table>
    </div>
[/code]


CC BY-SA 4.0
2020-03-05T12:22:02.073
63610
2020-03-05T12:22:02.073
32986
63600
answer