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

他の質問で追加した JavaScript コードは不完全でした。少なくとも、これはクロム コンソールが示す内容です (スクリーンショットを参照)。

エラーの概要

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

上記のclearText()関数が起動されますが、上記のコードには clearText 関数がありません。

2 番目のスクリーンショットでは、これらの行の結果が表示されます

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 に答える
0

私があなたを正しく理解していれば、CSSセレクターをより具体的にしたいだけだと思います。したがって、たとえば querySelector を使用できます...

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

「space_form」クラスの下に「空でない」クラスが見つかります。

これにはIE8以上が必要ですが、本当に古いブラウザをサポートしている場合は問題になるかもしれません.

于 2013-07-15T16:30:00.937 に答える
0

コードを確認してdocument.getElementsByClassNameくださいdocument.getElementByClass。

一方、document.getElementsByClassName要素のセットを返すと考えてください。したがって、次のようにする必要がありますdocument.getElementsByClassName("myClass")[1].value。

このテーマに関する情報はたくさんありますが、特定の問題で立ち往生していますか?

于 2013-07-15T16:02:43.153 に答える