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

How to change input element's visibility through jquery?

本文关键字：通过 jquery 可见性 何更改 输入 元素      更新时间：2023-09-26

对于标记，下面的代码运行良好，但对于<input>则不然。你能指导我怎么解决吗？

html:

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

css：

#toValue {
    visibility: hidden;
}

js:

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

不要在同一页中重复相同的id。将其更改为类：

.toValue {
    visibility: hidden;
}

Html:

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

然后：

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

演示。

或者对每个元素使用不同的id：

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

然后：

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

演示

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

Id必须是唯一的，如果你想使用公共选择器，也可以使用class，这里是元素的简单显示和隐藏演示

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

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

对于标记，下面的代码运行良好，但对于<input>则不然

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

解决方案是将id更改为class属性，并更改css：

.toValue {
    visibility: hidden;
}

和

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

js:

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

您的标记无效：两个元素具有相同的id。改为使用class：

HTML

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

CSS：

.toValue {
  visibility: hidden;
}
相关文章：