logo标签列表

JS / JQuery中替代使用多个if / else语句的方法是什么？

javascriptjqueryperformanceif-statement
4
我正在尝试比较许多页面元素的初始值和用户更改后的值，以提示保存等操作。有没有更好的方法来进行此检查而不需要使用许多 if / else 语句？switch 方法并不适用，因为需要检查的值有很多种，而不是单一的值与多个情况。欢迎任何提示/指针，谢谢！
if ($('#InitialhidLeadType').val() != $('#hidLeadType').val())
        bIsChange = true;
    else if ($('#InitialhidProductType').val() != $('#hidProductType').val())
        bIsChange = true;
    else if ($('#InitialhidFixedFilterType').val() != $('#hidFixedFilterType').val())
        bIsChange = true;
    else if ($('#InitialhidMinCreditScore').val() != $('#hidMinCreditScore').val())
        bIsChange = true;
    else if ($('#InitialhidMaxCreditScore').val() != $('#hidMaxCreditScore').val())
        bIsChange = true;
    else if ($('#InitialhidMinLoanAmount').val() != $('#hidMinLoanAmount').val())
        bIsChange = true;

    else if ($('#InitialhidMinLTV').val() != $('#hidMinLTV').val())
        bIsChange = true;
    else if ($('#InitialhidMaxLTV').val() != $('#hidMaxLTV').val())
        bIsChange = true;
    else if ($('#InitialhidMinCLTV').val() != $('#hidMinCLTV').val())
        bIsChange = true;
    else if ($('#InitialhidMaxCLTV').val() != $('#hidMaxCLTV').val())
        bIsChange = true;
    else if ($('#InitialhidPropertyType').val() != $('#hidPropertyType').val())
        bIsChange = true;
    else if ($('#InitialhidPropertyUse').val() != $('#hidPropertyUse').val())
        bIsChange = true;
    else if ($('#InitialhidBankruptcy').val() != $('#hidBankruptcy').val())
        bIsChange = true;
    else if ($('#InitialhidForeclosure').val() != $('#hidForeclosure').val())
        bIsChange = true;
    else if ($('#InitialhidLoanPurpose').val() != $('#hidLoanPurpose').val())
        bIsChange = true;
    else if ($('#InitialhidIsCashout').val() != $.trim($('#hidIsCashout').val()))
        bIsChange = true;
    else if ($('#InitialhidNoCreditScore').val() != $.trim($('#hidNoCreditScore').val()))
        bIsChange = true;
    else if ($('#InitialhidRelationship').val() != $.trim($('#hidRelationship').val()))
        bIsChange = true;
    else if ($('#InitialhidCurrentLoanVA').val() != $.trim($('#hidCurrentLoanVA').val()))
        bIsChange = true;
    else if ($('#InitialhidFoundHome').val() != $.trim($('#hidFoundHome').val()))
        bIsChange = true;
    else if ($('#InitialhidFHA').val() != $.trim($('#hidFHA').val()))
        bIsChange = true;
    else if ($('#InitialhidIsConforming').val() != $.trim($('#hidIsConforming').val()))
        bIsChange = true;
    else if ($('#InitialhidMSA').val() != $('#hidMSA').val())
        bIsChange = true;
    else if ($('#InitialhidStatedCreditRating').val() != $('#hidStatedCreditRating').val())
        bIsChange = true;
    else if ($('#InitialhidCampEffectivedate').val() != $('#hidCampEffectivedate').val())
        bIsChange = true;
    else if ($('#InitialhidCampExpirationdate').val() != $('#hidCampExpirationdate').val())
        bIsChange = true;
    else if ($('#InitialhidIsFixedFilter').val() != $('#hidIsFixedFilter').val())
        bIsChange = true;
    else if ($('#InitialhidTestCompaign').val() != $('#hidTestCompaign').val())
        bIsChange = true;

    else if ($('#InitialhidSelectedStates').val() != $('#hidSelectedStates').val())
        bIsChange = true;
    else if ($('#InitialhidVolumeTieredPricing').val() != $('#hidVolumeTieredPricing').val())
        bIsChange = true;
    else if ($('#InitialhidWeekDayCapacity').val() != $('#filterCapacity').val())
        bIsChange = true;
    else if ($('#InitialhidWeekendCapacity').val() != $('#filterCapacityWeekEnd').val())
        bIsChange = true;
    else if ($('#InitialhidHolidayCapacity').val() != $('#filterCapacityHoliday').val())
        bIsChange = true;

///////////////////////////////////// HTML Below //////////////////////////////////////

<div id = "changeCheck">

<asp:HiddenField ID="InitialhidLeadType" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidProductType" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidFixedFilterType" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidMinCreditScore" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidMaxCreditScore" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidMinLoanAmount" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidMaxLoanAmount" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidMinLTV" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidMaxLTV" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidMinCLTV" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidMaxCLTV" ClientIDMode="Static" runat="server" />

<asp:HiddenField ID="InitialhidWeekDayCapacity" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidWeekEndCapacity" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidHolidayCapacity" ClientIDMode="Static" runat="server" />

<asp:HiddenField ID="InitialhidPropertyType" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidPropertyUse" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidBankruptcy" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidForeclosure" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidLoanPurpose" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidIsCashout" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidNoCreditScore" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidRelationship" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidCurrentLoanVA" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidFoundHome" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidFHA" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidIsConforming" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidMSA" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidStatedCreditRating" ClientIDMode="Static" runat="server" />

<asp:HiddenField ID="InitialhidCampEffectivedate" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidCampExpirationdate" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidIsFixedFilter" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidTestCompaign" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidSelectedStates" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="InitialhidVolumeTieredPricing" ClientIDMode="Static" runat="server" />

4
这个问题似乎不适合本站，因为它涉及代码审查。 - dsgriffin
你能同时发布HTML吗？我相信我们可以找到一个解决办法！ - Karl-André Gagnon
1
是的，HTML会很有帮助 - 例如，如果您的隐藏输入与实际输入是直接兄弟关系，您可以只编写一个函数，该函数接受jQuery对象并将其与next()元素进行比较，并将您的输入传递给该函数。 - digiliooo
你可以考虑在http://codereview.stackexchange.com上发布此内容。 - James Montagne
刚刚添加了HTML，非常感谢到目前为止所有出色的回复，看起来有很多不同的方法可以采取！ - arcade16
5个回答
9

迭代元素，比较每一个元素，如果有更改，提示用户保存：

var save = false;

$('[id^="Initial"]').each(function() {
    if ( this.value != $('#'+this.id.replace('Initial','')).val()) save = true;
});

if (save) confirm(' would you like to save ');

通常情况下，您可以通过在元素更改时更改变量，而不是在某个时间检查所有元素来解决这个问题。
var save = false;

$(':input').on('change', function() {
    save = true;
});

window.onbeforeunload = function() {
    if (save) confirm(' would you like to save ');
}
你的不同方法无法检测到将字段改回原值的情况... - Bergi
@Bergi - 不对，只有在进行了更改之后才会如此。 - adeneo
我的意思是，当有人编辑输入字段时，change 触发，然后他撤销了他的编辑，然后点击了 submit。OP 的脚本不会再次发布已经存储的数据，而您的脚本则表明它们已更改。 - Bergi
@Bergi - 是的，我明白了，它会检测到是否进行了更改，无论更改的元素是否被改回默认值等。 - adeneo
0

改变你的方法。不要检查所有的值是否有更改，截取你的表单的change事件，在输入值被更改时设置标志：

$('#some-form-element').on('change', function (e) {
    // ... set flag here
});
0

这将告诉您是否在任何时候更改了表单元素的值。

var formIsDirty = false;
$(document).ready(function() {
    $(':input').change(function() {
        formIsDirty = true;
    });
});

当然，如果他们将值改回原始值，它不会告诉你。如果这还不够，你可以这样做：

$(document).ready(function() {
    $(':input').each(function() {
        $(this).data('original', $(this).val());
    });
});

然后当您进行验证时：

    var formIsDirty = false;
    $(':input').each(function() {
        if ($(this).data('original') != $(this).val()) {
            formIsDirty = true;
            return false;
        }
    });

第二个选项将让您不需要隐藏的“初始值”字段。
0

试试这个：

var map = [
    ['#InitialhidLeadType', '#hidLeadType'],
    ['#InitialhidProductType', '#hidProductType'],
    ['#InitialhidFixedFilterType', '#hidProductType']
    // etc..
];
for (var i = 0; i < map.length; i++) {
    if ($(map[i][0]).val() != $(map[i][1]).val()) {
        bIsChange = true;
        break;
    }
}
0
我会说结合adeneo和ACEfanatic02所建议的两种方法……但是有一个小变化：
$("input:visible").change(function() {
    var currID = $(this).prop("id");
    var initialValContainer = $("#Initial" + currID);

    if (initialValContainer.length > 0) {
        var currVal = $.trim($(this).val());
        var initialVal = $.trim(initialValContainer.val());

        if (currVal === initialVal) {
            $(this).addClass("changed");
        }
        else {
            $(this).removeClass("changed");
        }
    }
});

在那个时候，每当你准备好检查是否需要保存时，你可以使用以下代码来判断：

if ($(".changed").length > 0) {
    **prompt to save**
}

这样，代码只会在至少一个输入被标记为更改时才提示用户。此方法还允许您“取消标记”用户返回到原始值的输入，以及在需要时使用 $（“。changed”）.removeClass（“changed”） “重置”所有输入（例如，如果您正在保存新值而无需重新加载页面）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接