阅读<span> JS后更改<select>

问题描述

所以，我有一个带有输入和选择的表格。我需要做的是在需要的训练营中添加另一种颜色，并且我尝试不更改已经拥有的html，因此我正在JS中执行功能。 因为输入很容易，因为我执行以下功能，并且输入中出现“ data-val-required”，它会更改输入的颜色。

  $('input').each(function () {
        var req = $(this).attr('data-val-required');
        if (undefined != req) {
            $(this).css("background-color",'rgb(250,255,189)');
            $(this).attr('title','Este campo é obrigatório!');
        }
    });

但是，对于选择而言，我不能做同样的事情，因为“ val-required”位于 <select> 之后的范围内。我想做的是先阅读 <span> ，然后在 <select> 之前为其着色。

html就是这样的（视图中表单的每个阵营的class =“ col-md-9”都相同）

<div class="col-md-9">
  <select class="form-control">
    <option selected="selected" value="1">TEXTO 1</option>
    <option value="2">TEXTO 2</option>
    <option value="3">TEXTO 3</option>
  </select>
  <span class="field-validation-error" data-val-required="true">Campo obrigatório</span>
</div>

我尝试了此操作，但这为我的代码中的所有 <select> 营地着色，而不仅仅是所需的营地。

$('span').each(function () {
        var rep = $(this).attr('data-val-required');
        if (undefined != rep) {
            $('select').css("background-color",189)');
            $('select').attr('title','Este campo é obrigatório!');
        }
    });

在没有更改HTML的情况下，是否存在使函数读取跨度并仅更改该跨度之前的select的问题？ 我正在搜索childNodes，但似乎无法使用class而不是id来做到这一点。 谢谢！

解决方法

您必须在直接子级'~'上选择类型类型为SPAN的SELECT类型的SPAN。要搜索SELECT，请从SPAN中查找具有所需类和SELECT类型的同级。

$('select.form-control ~ span').each(function () {
        var rep = $(this).attr('data-val-required');
        if (undefined != rep) {
            let select = $(this).siblings('select.form-control');
            select.css("background-color",'rgb(250,255,189)');
            select.attr('title','Este campo é obrigatório!');
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-9">
  <select class="form-control">
    <option selected="selected" value="1">TEXTO 1</option>
    <option value="2">TEXTO 2</option>
    <option value="3">TEXTO 3</option>
  </select>
  <span class="field-validation-error" data-val-required="true">Campo obrigatório</span>
</div>
<div class="col-md-9">
  <select class="form-control">
    <option selected="selected" value="1">TEXTO 1</option>
    <option value="2">TEXTO 2</option>
    <option value="3">TEXTO 3</option>
  </select>
  <span>Campo obrigatório2</span>
</div>

,

尝试一下。

$('span').each(function() {
  var rep = $(this).attr('data-val-required');
  if (undefined != rep) {
   $(this).siblings('select').css("background-color",189)');
    $(this).siblings('select').find('select').attr('title','Este campo é obrigatório!');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="col-md-9">
  <select class="form-control">
    <option selected="selected" value="1">TEXTO 1</option>
    <option value="2">TEXTO 2</option>
    <option value="3">TEXTO 3</option>
  </select>
  <span class="field-validation-error" data-val-required="true">Campo obrigatório</span>
</div>
<div class="col-md-9">
  <select class="form-control">
    <option selected="selected" value="1">TEXTO 1</option>
    <option value="2">TEXTO 2</option>
    <option value="3">TEXTO 3</option>
  </select>
  <span>Campo obrigatório2</span>
</div>