javascript - Jquery .css() 不起作用(可能是由其他原因引起的)

Question

我正在尝试使用 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); 不起作用。最糟糕的是它没有返回任何错误所以我有点迷失了。

Answer 1

我认为选择器是错误的，您似乎正在使用jquery并尝试通过类名访问项目，代码应该是这样的:

setTimeout(function(){ $('.'+inputChanger).css({"width":"105%"})}, 0);
setTimeout(function(){ $('.'+label).css({"font-size":".6rem"})}, 0);

您似乎已决定为此目的使用唯一的类名，但您也可以使用 input1、input2 和 input3 作为输入元素的唯一 ID，在这种情况下，您可以通过 $('# 访问它们'+id)