Как изменить видимость элемента ввода через jquery?

Question

Для тега ниже код работает нормально, но для <input> нет. Можете ли вы посоветовать мне, как его решить?

HTML:

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

CSS:

#toValue { 
    visibility: hidden; 
} 

ЯШ:

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

Answer 1

Не повторить тот же id на той же странице. Измените его к классу:

.toValue { 
    visibility: hidden; 
} 

Html:

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

Тогда:

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

Demo.

Или использовать различные идентификаторы для каждого элемента:

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

Тогда:

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

Demo

Answer 2

Ваша разметка недействителен: два элемента с одинаковым id. Используйте class вместо:

HTML

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

CSS:

.toValue { 
    visibility: hidden; 
} 

Answer 3

Идентификаторы должны быть уникальными для элементов. первый элемент с этим конкретным идентификатором всегда будет обновляться, а другой отбрасывается так, чтобы либо использовать атрибут «class», либо изменять идентификаторы

Answer 4

То же самое, что и для нескольких элементов на одной странице, делает неправильную разметку, и это трудно работать когда вы пытаетесь использовать js с этими элементами.

Для бирки нижеследующий код работает нормально, но для <input> нет.

Это потому, что:
Браузер останавливает поиск при обнаружении первого элемента и не идет рядом с поиском другого.
_{ПРИМЕЧАНИЕ. - Если вы попытаетесь проверить длину вашего селектора, он всегда будет возвращать 1.}

Решение этого является то, что вы измените идентификатор атрибута класса и CSS, а также:

.toValue { 
    visibility: hidden; 
} 

и

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

в ЯШ:

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

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">