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

我有一个名为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>");
}

---

谢谢Stack

当您选择NA而不是尝试将该功能构建到同一个函数中时，我只需要一个单独的函数

我将重写您的事件处理程序，使其更干净

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

这样，您就不会在每次触发事件时用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"
    }
}

---

这是基于您只有一种情况，即您将在NA的情况下传递单个requiredField创建一个函数，该函数将从所有字段中删除添加的内容，并在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，而不是在那里对其进行硬编码，以增加灵活性。

编写复杂的jQuery，这是主要问题，它不应该很复杂。从某种意义上说，这很复杂，因为我正在尝试编写可重用的东西，因此，使用可重用函数是一条可行之路。请注意，您可以使用此关键字引用事件的已更改元素目标，而不是重新查询DOM，而不是$requestHistoryRequestType.val==EXPAPP | |$requestHistoryRequestType.val===EXPDEN您可以编写代码：if$.inaraythis.value，['one'，'two']>-1add，当我使用您的确切源代码时，我得到一个错误，对象没有方法“attr”…太好了。我使用相同类型的源代码迭代并添加类。谢谢你的帮助；现在我知道如何循环了。每一个！

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();
  });
}