我正在尝试使用 JavaScript 和 jQuery 为表单插入一些 CSS 规则。
不幸的是它不起作用。
单击任何输入时，我想对具有相同“名称”的所有输入进行一些检查，并应用或删除类或 CSS 规则。
这是我的 Html:
<input type="text" class="form-control form-control-lg form-style input1" name="input-class" value="" placeholder="John">
<label class="form-label-input form-label-input-1">Name:</label>
<input type="text" class="form-control form-control-lg form-style input2" name="input-class" value="" placeholder="Doe">
<label class="form-label-input form-label-input-2">Surname:</label>
<input type="text" class="form-control form-control-lg form-style input3" name="input-class" value="" placeholder="Passions">
<label class="form-label-input form-label-input-3">Passions:</label>
这是我的脚本，附有一些解释:
//On Click of all the elements with name="input-class"
document.querySelectorAll('input[name="input-class"]').forEach(item => {
item.addEventListener('click', event => {
//Get all Inputs in a Static NodeList
const inputer = document.querySelectorAll('input[name="input-class"]');
//Convert the List into an Array
var btnsArri = Array.from(inputer);
//Loops through all the array on inputs
var i;
for (i = 0; i < btnsArri.length; i++) {
if(btnsArri[i] === document.activeElement){
if(btnsArri[i].value === ""){
console.log(i + ' is empty and selected')
//Recreate the name of the class
j = 1
h = j + i;
var label = 'form-label-input-' + h;
var inputChanger = $(btnsArri[i]).attr('class').split(' ')[3];
console.log(label)
//add CSS Rule
//------------------------THAT'S WHERE I'M STUCK..--------------------
setTimeout(function(){ $(inputChanger).css({"width":"105%"})}, 0);
setTimeout(function(){ $(label).css({"font-size":".6rem"})}, 0);
}
if(btnsArri[i].value !== ""){
console.log(i + ' is full and selected')
}
}
if(btnsArri[i] !== document.activeElement){
if(btnsArri[i].value === ""){
console.log(i + ' is empty')
}
if(btnsArri[i].value !== ""){
console.log(i + ' is full')
}
}
}
})
})
代码工作得很好，只是部分 setTimeout(function(){ $(inputChanger).css({"width":"105%"})}, 0);
setTimeout(function(){ $(label).css({"font-size":".6rem"})}, 0); 不起作用。最糟糕的是它没有返回任何错误所以我有点迷失了。
最佳答案
我认为选择器是错误的，您似乎正在使用jquery并尝试通过类名访问项目，代码应该是这样的:
setTimeout(function(){ $('.'+inputChanger).css({"width":"105%"})}, 0);
setTimeout(function(){ $('.'+label).css({"font-size":".6rem"})}, 0);
您似乎已决定为此目的使用唯一的类名，但您也可以使用 input1、input2 和 input3 作为输入元素的唯一 ID，在这种情况下，您可以通过 $('# 访问它们'+id)
关于javascript - Jquery .css() 不起作用(可能是由其他原因引起的)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66876385/