html - 如果值等于，则将 CSS 类添加到行元素

Question

使用 JQuery 我想检查输入的值，如果它等于 Complete 我想将 Bootstrap 类 is-valid 添加到该输入，并且同一行上的所有其他输入。

类似这样的东西(伪代码)；

if wb_status_reg = Complete {
   // add is-valid to all row inputs / select boxes
}

我应该注意到，有时该行将包含一个选择框，而不仅仅是文本输入。另外，我无法编辑 html，因为它是由表单生成器组件(在 CMS 中)生成的。

我的代码当前正在运行，但我知道它太长并且可以改进。在我的代码中，我显示了一个 form-row，但实际上我还有更多，因此我需要将其重复几次。

如何以更有效的方式实现这一目标？

jQuery(document).ready(function($) {
  var wb_stage_reg = $('#wb_stage_reg');
  var wb_status_reg = $('#wb_status_reg');
  var wb_date_reg = $('#wb_date_reg');
  setIsValid($);
});

function setIsValid($) {
  wb_stage_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_stage_reg).addClass("is-valid") : "";
  wb_status_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_status_reg).addClass("is-valid") : "";
  wb_date_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_date_reg).addClass("is-valid") : "";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
  <div class="col-3">
    <div class="form-group rsform-block-wb-stage-reg">
      <div class="formControls">
        <div class="sp-input-wrap">
          <input class="form-control" id="wb_stage_reg" name="form[wb_stage_reg]" type="text" value="Registration"><span></span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="form-group rsform-block-wb-status-reg">
      <div class="formControls">
        <div class="sp-input-wrap">
          <input class="form-control" id="wb_status_reg" name="form[wb_status_reg]" type="text" value="Complete"><span></span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="form-group rsform-block-wb-date-reg">
      <div class="formControls">
        <div class="sp-input-wrap">
          <input class="form-control" id="wb_date_reg" name="form[wb_date_reg]" type="text" value="2020-06-08 09:41:40"><span></span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

类似这样的事情:

您需要将所有字段的 ID 更改为类

既然你不能，我就用这个名字来代替:

$(function() {
  $("[name='form[wb_status_reg]']").each(function() {
    const $parent = $(this).closest(".form-row");
    const complete = this.value === "Complete";
    $parent.find("[name='form[wb_date_reg]'], [name='form[wb_stage_reg]']").toggleClass("is-valid",complete)
  })  
});

.is-valid { color:green}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
  <div class="col-3">
    <div class="form-group rsform-block-wb-stage-reg">
      <div class="formControls">
        <div class="sp-input-wrap">
          <input class="form-control wb_stage_reg" name="form[wb_stage_reg]" type="text" value="Registration"><span></span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="form-group rsform-block-wb-status-reg">
      <div class="formControls">
        <div class="sp-input-wrap">
          <input class="form-control wb_status_reg" name="form[wb_status_reg]" type="text" value="Complete"><span></span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="form-group rsform-block-wb-date-reg">
      <div class="formControls">
        <div class="sp-input-wrap">
          <input class="form-control wb_date_reg" name="form[wb_date_reg]" type="text" value="2020-06-08 09:41:40"><span></span>
        </div>
      </div>
    </div>
  </div>
</div>