父节点或父节点/类选择器

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

您在 您的其他问题 中添加的 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] 来访问数组的第一个元素。

Answer 2

如果我理解正确，我认为您只是想更具体地使用您的 css 选择器。 所以你可以使用 querySelector 例如...

document.querySelector('.space_form .no-empty');

这会在“space_form”类下面找到一个“no-empty”类。

虽然这需要 IE8 或更高版本，但如果您支持非常旧的浏览器，我认为这可能是个问题。

Answer 3

检查您的代码，我确定您输入的是 document.getElementsByClassName 而不是 document.getElementByClass。

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

有很多关于这个主题的信息，你是否陷入了一个特定的问题？