函数切换复选框。
函数切换复选框。
提问于 2018-04-26 09:27:19
我有一个有两个日期的表单(格式为"YYYY-MM-DD")，输入字段‘发票发送’/‘付款接收’，其中每一个有两个复选框“未决”/“过时”。
如果单击其中一个复选框，则输入字段应填充“1111-11-11”或“0000-00-00”，并且应该禁用同级复选框。
到目前为止，这段代码工作得很好，并且做到了这一点。
$(document).ready(function(){
$("input.invoice-obsolete").click(toggle_checkbox);
$("input.invoice-pending").click(toggle_checkbox);
$("input.payment-obsolete").click(toggle_checkbox);
$("input.payment-pending").click(toggle_checkbox);
var invoice_sent = $(".invoice-sent").val();
var payment_received = $(".payment-received").val();
if (invoice_sent == '1111-11-11') {
$("input.invoice-obsolete").attr("checked",true);
}
if (invoice_sent == '0000-00-00') {
$("input.invoice-pending").attr("checked",true);
}
if (payment_received == '1111-11-11') {
$("input.payment-obsolete").attr("checked",true);
}
if (payment_received == '0000-00-00') {
$("input.payment-pending").attr("checked",true);
}
});
function toggle_checkbox() {
if($('input.invoice-obsolete').prop('checked')) {
$("input.invoice-pending").attr("disabled", true);
$('input.invoice-sent').val('1111-11-11');
$("input.invoice-sent").attr("disabled", true);
};
if($('input.invoice-pending').prop('checked')) {
$("input.invoice-obsolete").attr("disabled", true);
$('input.invoice-sent').val('0000-00-00');
$("input.invoice-sent").attr("disabled", true);
};
if(! $('input.invoice-obsolete').prop('checked')) {
$("input.invoice-pending").removeAttr("disabled");
}
if(! $('input.invoice-pending').prop('checked')) {
$("input.invoice-obsolete").removeAttr("disabled");
}
if ( (! $("input.invoice-pending").is(':checked')) && (! $("input.invoice-obsolete").is(':checked')) ) {
$("input.invoice-sent").attr("disabled", false);
}
if($('input.payment-obsolete').prop('checked')) {
$("input.payment-pending").attr("disabled", true);
$('input.payment-received').val('1111-11-11');
$("input.payment-received").attr("disabled", true);
};
if($('input.payment-pending').prop('checked')) {
$("input.payment-obsolete").attr("disabled", true);
$('input.payment-received').val('0000-00-00');
$("input.payment-received").attr("disabled", true);
};
if(! $('input.payment-obsolete').prop('checked')) {
$("input.payment-pending").removeAttr("disabled");
}
if(! $('input.payment-pending').prop('checked')) {
$("input.payment-obsolete").removeAttr("disabled");
}
if ( (! $("input.payment-pending").is(':checked')) && (! $("input.payment-obsolete").is(':checked')) ) {
$("input.payment-received").attr("disabled", false);
}
} Invoice sent
obsolete
pending
Payment received
obsolete
pending如何重构代码，以避免不必要的重复？
回答 1
Code Review用户
回答已采纳
发布于 2018-04-26 11:22:23
代码中似乎有一些bug：
- JS代码提到了
input.invoice-pending，但是没有这样的元素。 id属性值在页面上应该是唯一的。name属性值在表单中也应该是唯一的。
关于重构的建议：
- 有两部分行为相似:一是发票，一是付款。而不是用
invoice-或payment-作为每个类名的前缀，将该类分配给包含div的元素，并从以下元素中删除前缀：“ <输入class=”日期“/> ”/div>，那么您可以创建一个通用函数来处理表单的两个部分: function ($container){$container.find("input.obsolete").click(toggle_checkbox)；.}然后对这两个部分调用它：$(Document).ready(函数(){initForm($(“发票”))；initForm($(“支付”))；})； - 不总是执行像
$('input.invoice-pending')这样的查询，您可以将结果存储到一个变量中，然后使用变量: //使用复数形式来显示我们选择了多个元素var $obsoleteInvoices =$(‘input.Input.Invoy-$obsoleteInvoices’)；
页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://codereview.stackexchange.com/questions/192979
复制相关文章
相似问题
腾讯云开发者
