0

类选择器不起作用，我如何始终获得我特别应用该功能而不是第一个的类，因为如果按类选择器工作，则项目具有相同的类，它将采用第一类而不是元素我正在申请。

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');                   
    }       
}
4

3 回答 3

0

检查您的代码，我确定您使用的是 mentdocument.getElementsByClassName而不是document.getElementByClass.

另一方面，考虑这document.getElementsByClassName将返回一组元素，所以你应该做这样的事情document.getElementsByClassName("myClass")[1].value。

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

于 2013-07-15T16:02:43.153 回答
0

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

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

它将在“space_form”类下面找到一个“no-empty”类。

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

于 2013-07-15T16:30:00.937 回答
0

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

您的代码的结果返回一个数组

于 2013-07-15T20:22:46.360 回答