Parent或ParentNode / Class Selector

Question

类选择器不起作用，我如何总是得到我特定而不是第一个应用函数的类，因为如果按类工作的选择器它将采用第一个类而不是第一个类，那么这些项具有相同的类我正在申请的元素。

HTML

<li class="space_form">
    <label>
        Nome*
        <input type="text" class="no-empty" name="Nome" value="Nome" onFocus="formEmptyLeft(this);clearText(this)" onBlur="formEmptyLeft(this);clearText(this)" />
        <div class="campo_vazio-left">*Preenchimento do campo obrigatório</div>                                                                                     
    </label>
</li>

<li class="fright">
    <label>
        Sobrenome*
        <input type="text" class="no-empty" name="Sobrenome" value="Sobrenome" onFocus="formEmptyRight(this);clearText(this)" onBlur="formEmptyRight(this);clearText(this)" />
        <div class="campo_vazio-right">*Preenchimento do campo obrigatório</div>                                                                                                                                    
    </label>
</li>

的Javascript

function formEmptyLeft()
{
    var input = document.getElementByClass('no-empty');

    if(input.value.length == 0)
    {
        document.getElementByClass('campo_vazio-left').style.display = 'block'; 
        document.getElementByClass('no-empty').classList.add('form_invalido');              
    }
    else {
        document.getElementByClass('campo_vazio-left').style.display = 'none'; 
        document.getElementByClass('no-empty').classList.remove('form_invalido');                   
    }       
}   

function formEmptyRight()
{
    var input = document.getElementByClass('no-empty');

    if(input.value.length == 0)
    {
        document.getElementByClass('campo_vazio-right').style.display = 'block'; 
        document.getElementByClass('no-empty').classList.add('form_invalido');              
    }
    else {
        document.getElementByClass('campo_vazio-right').style.display = 'none'; 
        document.getElementByClass('no-empty').classList.remove('form_invalido');                   
    }       
}   

Answer 1

检查您的代码，我确定您document.getElementsByClassName代替document.getElementByClass。

另一方面，请考虑document.getElementsByClassName将返回一组元素，因此您应该执行类似document.getElementsByClassName("myClass")[1].value的操作。

有关此主题的大量信息，您是否遇到了特定问题？

Answer 2

如果我理解你的话，我想你只想更加具体地说明你的css选择器。 所以你可以使用querySelector，例如......

document.querySelector（'。space_form .no-empty'）;

在'space_form'类下面会找到一个'非空'类。

虽然这需要IE8或更高版本，但我认为如果你支持真正的旧浏览器可能会有问题。

Answer 3

您在您的其他问题中添加的javascript代码不完整 - 至少这是Chrome控制台告诉的内容（请参见屏幕截图）。

<input type="text" class="no-empty name_field" name="Nome" value="Nome" 
      onFocus="formEmptyLeft();clearText()"
      onBlur="formEmptyLeft();clearText()" /> 

在clearText()函数上方被触发 - 但上面的代码没有clearText函数。

在第二个屏幕截图中，您会看到这些行的结果

var input = document.getElementsByClassName('no-empty');
if(input.value.length == 0)

您忘记添加document.getElementsByClassName('no-empty')[0];，现在您有一个数组而不是输入元素。

在这里你可以看到document.getElementsByClassName('no-empty');返回一个数组。你忘了添加[0]来访问数组的第一个元素。