Question

我创造了三个功能。我想把它缩短或组合成一个功能。有可能吗？
这是我的代码！

$(function(){
   $(".js-disable-form").on("submit", function() {
     $('#loading-modal').modal('show');
     $(this).find("input[type=submit]").prop('disabled', true);
   })
});

$(function(){
  $(".js-disable-form-approval").on("submit", function() { 
    var res = confirm("入力内容で承認します。よろしいですか？");
    if (res == true) {
      $('#loading-modal').modal('show');
      $(this).find("input[type=submit]").prop('disabled', true);
    } else {
     return false;
      }
    })
});

$(function(){
  $(".js-disable-form-individual").on("submit", function() {
    $(this).find("input[type=submit]").prop('disabled', true);
  })
  $('.js-disable-btn').on("click", function() { 
    $('#loading-modal').modal('show');
  })  
});

Answer 1

这应该这样做：

Monoid

这比原始代码短得多，但应该说明如何避免重复代码。

Answer 2

您至少可以将所有事件处理程序放在一个函数中：

$(function(){
    $(".js-disable-form").on("submit", function() {
        $('#loading-modal').modal('show');
        $(this).find("input[type=submit]").prop('disabled', true);
    })

    $(".js-disable-form-approval").on("submit", function() { 
        var res = confirm("入力内容で承認します。よろしいですか？");
        if (res == true) {
            $('#loading-modal').modal('show');
            $(this).find("input[type=submit]").prop('disabled', true);
        } else {
            return false;
        }
    })

    $(".js-disable-form-individual").on("submit", function() {
        $(this).find("input[type=submit]").prop('disabled', true);
    })

    $('.js-disable-btn').on("click", function() { 
        $('#loading-modal').modal('show');
    })  
});

Answer 3

$('[class^=".js-disable-"').on("submit", function(){
    if ($(this).className.indexOf("individual") >= 0 || $(this).className.indexOf("form") >=0){
        $(this).find("input[type=submit]").prop('disabled', true);  
        if ($(this).className.indexOf("individual") >= 0 ){     
            $('.js-disable-btn').on("click", function() { 
                $('#loading-modal').modal('show');
            })  
        }
        else{
            $('#loading-modal').modal('show');
        }
    }  
    else { 
        var res = confirm("入力内容で承認します。よろしいですか？");
        if (res == true) {
            $('#loading-modal').modal('show');
            $(this).find("input[type=submit]").prop('disabled', true);
        } 
        else {
            return false;
        }
    }
});

没有测试，因为没有附加html。基本上，它匹配以.js-disable-开头的类，并附加一个提交事件。然后它只是重新安排你的功能。

是否可以缩短这些功能

3 个答案: