jqueryを使用して入力要素の可視性を変更するにはどうすればよいですか？

Question

タグの場合、下のコードは正常に動作していますが、<input>の場合は正しくありません。あなたはそれを解決する方法を教えてくれますか？

HTML：

<span id="toValue">AND</span> 
<input id="toValue"> 

はCSS：

#toValue { 
    visibility: hidden; 
} 

JS：

$('#toValue').css("visibility", "visible"); 

Answer 1

同じページに同じidを繰り返さないでください。クラスのように変更します。

.toValue { 
    visibility: hidden; 
} 

HTML：

<span class="toValue">AND</span> 
<input class="toValue"> 

その後：

$('.toValue').css("visibility", "visible"); 

Demo。

かは、各要素に異なるIDを使用します。次に

<span class="toValue" id="mySpan">AND</span> 
<input class="toValue" id="myInput"> 

：同じidを持つ2つの要素：

$('#mySpan, #myInput').css("visibility", "visible"); 

Demo

Answer 2

あなたのマークアップは無効です。代わりにclassを使用してください：

HTML

<span class="toValue">AND</span> 
<input class="toValue"> 

CSS：

.toValue { 
    visibility: hidden; 
} 

Answer 3

IDが要素で一意である必要があります。その特定のidを持つ最初の要素は常に更新され、もう一方の要素は破棄され、 "class"属性を使用するかidを変更します

Answer 4

1つのページ内の複数の要素と同じidは無効なマークアップを生成し、それらの要素でjsを使用しようとすると。

タグの場合、下のコードは正常に動作していますが、<input>ではありません。

理由：
ブラウザは見つかった最初の要素でルックアップを停止し、別の要素を探すために次に移動しません。
_{注： - セレクタの長さを確認すると、常に1が返されます。}

.toValue { 
    visibility: hidden; 
} 

と

<span class="toValue">AND</span> 
<input class="toValue"> 

でJS：

$('.toValue').css("visibility", "visible"); 

これに

ソリューションを使用すると、クラス属性と同様に、CSSにIDを変更することです

Answer 5

Idが一意である必要があり、どちらかが共通のセレクターを使用したい場合は、クラスを使用することができ、ここで

function func1(){ 
 
    $("#spanValue").hide(); 
 
    $("#inputValue").hide(); 
 
} 
 

 
function func2(){ 
 
    $("#spanValue").show(); 
 
    $("#inputValue").show(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="spanValue">AND</span> 
 
<input id="inputValue" type="text"> 
 
<input type="button" onClick="func1();" value="Hide"> 
 
<input type="button" onClick="func2();" value="Show">