如何解决jQuery .css不适用于迭代元素
我有输入元素的列表,如果条件为true,结果将是更改样式。但是有一个错误:elem.css is not a function
如果我将每个元素都放在数组中就可以了。可能是什么问题?
const calcTyp = $('#calcTyp'); // select tag
var elems = document.querySelectorAll('input[type="text"]');
jQuery.each(elems,function(i,elem){
calcTyp.change(function () {
if(calcTyp.val() == $(elems).attr("name")) {
elem.css('border-color','green');
}
});
});
解决方法
由于css()
是jQuery方法,因此您必须将jQuery引用添加到elem
:
$(elem).css('border-color','green');
,
您实际上不需要使用$.each
遍历元素。您可以简单地将一个函数作为第二个位置参数传递:
$('input[type="text"]').css('border-color',function() {
return calcType.val() === $(this).attr('name') ? 'green' : '';
});
这是因为大多数jQuery方法可以隐式地迭代与选择器匹配的元素的集合。
请参见下面的概念验证:
const calcType = $('#calcType');
calcType.on('input',function() {
$('input[type="text"]').css('border-color',function() {
return calcType.val() === $(this).attr('name') ? 'green' : '';
});
});
input {
border: 3px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Calc type: <select id="calcType">
<option disabled selected>Choose one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<br />
<input type="text" name="a" />
<input type="text" name="b" />
<input type="text" name="c" />
,
混合jquery和DOM通常不是最好的。您的代码中有两个问题导致错误并导致错误的检查。
var elems = document.querySelectorAll('input[type="text"]');
jQuery.each(elems,function(i,elem){
//if(calcTyp.val() == $(elems).attr("name")) { <-- wrong variable here
// elem.css('border-color','green'); <-- DOM element treated like jQuery
//}
if(calcTyp.val() == $(elem).attr("name")) {
$(elem).css('border-color','green');
}
});
无需循环,只需要做一个与名称匹配的选择器即可。
$('input[type="text"][name="' + calcTyp.val() + '"]').css('border-color','green');
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。