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

然后：

$('#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

ID对于元素必须是唯一的。具有该特定id的第一个元素将始终被更新而另一个被丢弃，因此要么使用＆＃34; class＆＃34;属性或更改ids

Answer 4

单个页面中多个元素的相同ID会产生无效的标记，当您尝试将js与这些元素一起使用时，这很难发挥作用。

对于代码，以下代码工作正常，但<input>不是

这是因为：
  浏览器会在找到的第一个元素处停止查找，而不会在旁边查找另一个元素   _{注意： - 如果您尝试检查选择器的长度，它将始终返回1.}

解决方法是将id更改为class属性和css：

.toValue {
    visibility: hidden;
}

和

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

在js：

$('.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">

如何通过jquery更改输入元素的可见性？

5 个答案: