Question

我有一个名为“requestHistoryRequestType”的选择框。我正在尝试编写一些jQuery，以便在更改该选择框的值时，我调用一个函数，将一个类和属性添加到一个字段，并将一个span添加到我作为参数传入的字段中。

问题是如果用户选择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>");
}

实际的on change listener：

//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");
    }
});

谢谢Stack！

Answer 1

当你选择“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中有三次测试您的条件。当你进入更复杂和更大的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"
    }
}

这是基于你只有一个案例，你将在“NA”案件中传递一个“requiredField”

Answer 2

创建一个函数，该函数将从所有字段中删除添加的内容并在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（），而不是在那里对其进行硬编码，以增加灵活性。

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

2 个答案: