Question

我有两个元素，在执行时会执行相同的功能。如何合并这些脚本以使其更简洁？

//e_jumlah script
$("#t_jps_item").on('keyup','.e_jumlah',function(){             
    var par_jml = $(this).val().replace(/,/g , '');
    var par_hrg = $(this).closest('tr').find('.e_harga').val().replace(/,/g , '');

    var total   = parseInt(par_jml) * parseFloat(par_hrg);

    $(this).closest('tr').find('.e_total').val(total.toLocaleString());
});

//e_harga script
$("#t_jps_item").on('keyup','.e_harga',function(){              

    var par_hrg = $(this).val().replace(/,/g , '');
    var par_jml = $(this).closest('tr').find('.e_jumlah').val().replace(/,/g , '');

    var total   = parseInt(par_jml) * parseFloat(par_hrg);

    $(this).closest('tr').find('.e_total').val(total.toLocaleString());
});

Answer 1

$("#t_jps_item").on('keyup','.e_jumlah , .e_harga ',function(event){             
    var par_jml = $(this).val().replace(/,/g , '');

//使用事件对象尝试获取类似于event.target的类，将受尊敬的类传递给find方法 var par_hrg = $（this）.closest（'tr'）。find（event）.val（）。replace（/，/ g，''）;

    var total   = parseInt(par_jml) * parseFloat(par_hrg);

    $(this).closest('tr').find('.e_total').val(total.toLocaleString());
});

您可以传递多个选择器。 http://api.jquery.com/on/

Answer 2

您可以将通用类添加到两个DOM中，然后为该类调用函数。在该类中，您可以使用唯一的类（最好是id）来获取值。

$(".container").on('keyup','.input-item',function(){  
    var par_jml = $('.e_jumlah').val().replace(/,/g , '');
    var par_hrg = $('.e_harga').val().replace(/,/g , '');
    var total   = parseInt(par_jml) * parseFloat(par_hrg);

   var total   = parseInt(par_jml) * parseFloat(par_hrg);

    $('.total').val(total.toLocaleString());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input class="input-item e_jumlah" id="s1" placeholder="input1" value="0">
  <input class="input-item e_harga" id="s1" placeholder="input1" value="0">
  <input class="total">
</div>

Answer 3

您可以将e_harga或e_jumlah作为arg传递给以下函数：

function convertSrting(passAnArgument){ //.e_harga or .e_jumlah
$("#t_jps_item").on('keyup',passAnArgument,function(){             
    var par_jml = $(this).val().replace(/,/g , '');
    var par_hrg = $(this).closest('tr').find(passAnArgument).val().replace(/,/g , '');

    var total   = parseInt(par_jml) * parseFloat(par_hrg);

    $(this).closest('tr').find('.e_total').val(total.toLocaleString());
});
}

以上功能现在充当普通功能

绑定两个元素的事件

convertSrting('.e_harga')
convertSrting('.e_jumlah')

希望有帮助

Answer 4

将输入字段的引用传递给一个函数，在此我们定义要为两个元素都执行的主体。

function executeCode(e){
    var par_jml = $(e.currentTarget).val().replace(/,/g , '');
    var par_hrg = $(e.currentTarget).closest('tr').find('.e_harga').val().replace(/,/g , '');

    var total   = parseInt(par_jml) * parseFloat(par_hrg);

    $(e.currentTarget).closest('tr').find('.e_total').val(total.toLocaleString());

}

$("#t_jps_item").on('keyup','.e_jumlah',function(e){             
    executeCode(e)
});

//e_harga script
$("#t_jps_item").on('keyup','.e_harga',function(e){              
    executeCode(e)    
});

Answer 5

您可以使用事件数据将.e_harga或.e_jumlah作为参数传递给公共事件处理程序回调，如下所示：

    $("#t_jps_item").on('keyup','.e_jumlah',{classSelector: '.e_harga'},function(event){commonHandler(event);});
    $("#t_jps_item").on('keyup','.e_harga',{classSelector: '.e_jumlah'}, function(event){commonHandler(event);});

    function commonHandler(event){             
            var par = $(this).val().replace(/,/g , '');
            var par_hrg_Or_jml = $(this).closest('tr').find(event.data.classSelector).val().replace(/,/g , '');   
            var total   = parseInt(par) * parseFloat(par_hrg_Or_jml);   
            $(this).closest('tr').find('.e_total').val(total.toLocaleString());
}

此事件处理程序回调在这两个元素之间是常见的

如何将这两个确切事件与不同元素合并？

5 个答案: