如果值等于,则添加CSS类到行元素上

问题描述 投票:0回答:1

使用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>
html jquery
1个回答
2
投票

就像这样。

你需要把所有字段的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>
© www.soinside.com 2019 - 2024. All rights reserved.