如何解决阅读<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。