如果选择输入等于值，则执行此操作，如果更改则删除这些更改

我有一个名为“requestHistoryRequestType”的选择框。我正在尝试编写一些jQuery，以便当该选择框的值发生更改时，我调用一个函数，它将一个类和属性添加到字段中，并将一个跨度附加到作为参数传入的字段中。如果选择输入等于值，则执行此操作，如果更改则删除这些更改

问题是，如果用户选择EXPAPP或EXPDEN，但随后将其选择更改为NA，则应从先前的字段中删除添加的内容并将相同的内容添加到不同的字段。有点难以解释，但提出问题！我有点新来编写复杂的jQuery。

，做加法类和这样的功能：

function requiredField(requiredField) { 
    $(requiredField).parent().addClass('has-error'); 
    $(requiredField).attr('data-rule-required', true); 
    $("label[for='" + requiredField.replace('#', '') + "']").append("<span style='color:#b94a48;' class='has-error has-tooltip' data-placement='right' title='Required Field'>*</span>"); 
}

实际的变化监听器：

//Validations for EXPAPP, EXPDEN, and NA 
$("#requestHistoryRequestType").on("change", function() { 
    if ($("#requestHistoryRequestType").val() === "EXPAPP" || $("#requestHistoryRequestType").val() === "EXPDEN"){ 
     requiredField("#requestHistoryVerbalDateTime"); 
     requiredField("#requestHistoryWrittenDateTime"); 
    } else if ($("#requestHistoryRequestType").val() === "NA") { 
     requiredField("#requestHistoryComments"); 
    } 
});

感谢堆栈！

来源

2013-12-12 Devan

_“编写复杂的jQuery”_，这是主要问题，它不应该是_complex_。 – undefined

好吧，这是复杂的，我试图写一些可重用的东西，因此功能。 – Devan

使用可重复使用的函数是最好的选择。请注意，您可以使用'this'关键字来引用_changed_元素（event_的_ie目标），而不是重新查询DOM，而不是'$（“＃requestHistoryRequestType”）。 $（“＃requestHistoryRequestType”）。val（）===“EXPDEN”）'你可以编码：'if（$ .inArray（this.value，['one'，'two']）> -1）' – undefined

创建将从所有字段删除已添加的东西，requiredField之前调用它（函数）调用：

function removeRequiredFields() 
{ 
    var $fields = $("#requestHistoryVerbalDateTime, #requestHistoryWrittenDateTime, #requestHistoryComments"); 
    $fields.parent().removeClass('has-error'); 
    $fields.attr('data-rule-required', false); 
    $fields.each(function() { 
    $("label[for='"+$(this).attr('id')+"']").find("[title='Required Field']").remove(); 
    }); 
}

或者您可以将事件处理函数$fields传递给removeRequiredFields（），而不是在那里对其进行硬编码，以增加灵活性。

来源

2013-12-12 18:43:43 pvgoran

奇怪的是，当我使用你的确切来源时，我得到一个错误，“对象＃没有方法'attr'”... – Devan

对，我用$（）编辑和包装“this”。 – pvgoran

太好了。我使用相同类型的源代码迭代并添加类。谢谢您的帮助;现在我知道如何通过.each循环！ – Devan

我只是有一个单独的功能，当你选择一个“NA”，而不是试图将该功能构建到相同的功能。

我会重写您的事件处理程序以使其更清洁一些（IMO）。

//Validations for EXPAPP, EXPDEN, and NA 
$("#requestHistoryRequestType").on("change", function() { 
    var selectedVal = $(this).val(); 
    if (selectedVal === "EXPAPP" || selectedVal === "EXPDEN"){ 
     requiredField("#requestHistoryVerbalDateTime"); 
     requiredField("#requestHistoryWrittenDateTime"); 
    } else if (selectedVal === "NA") { 
     requiredField("#requestHistoryComments"); 
    } 
});

这样，你不打DOM潜在的3次每次触发事件的时间来测试你的条件。一个小的变化，但可能是一个有用的，因为你进入更复杂和更大的jQuery选择器。

编辑：如果你觉得你必须做一个功能，那么你可以打电话与要追加

function requiredField(requiredField1, requiredField2) { 
    if (requiredField2 != null){ 
     $(requiredField1,requiredField1).parent().addClass('has-error'); 
     $(requiredField1,requiredField1).attr('data-rule-required', true); 
     var requiredLabel = "<span style='color:#b94a48;' class='has-error has-tooltip' data-placement='right' title='Required Field'>*</span>" 
     $("label[for='" + requiredField1.replace('#', '') + "']").append(requiredLabel); 
     $("label[for='" + requiredField2.replace('#', '') + "']").append(requiredLabel); 
    } 
    else { 
     //remove multiple element classes and add it to the single one representing the "NA" 
    } 
}

这是基于你永远只能有一个情况下，你会是这两个元素的功能通过一个单一的“requiredField”上的“NA”的情况下

来源

2013-12-12 18:35:00 Mark

如果选择输入等于值，则执行此操作，如果更改则删除这些更改

回答

相关问题