尝试在移动设备上移动/显示/隐藏搜索输入，但移动版本由于 ID 不唯一而无法运行答案

【问题标题】：Trying to move/show/hide a Search Input on Mobile but Mobile version doesn't function because of non-unique ID尝试在移动设备上移动/显示/隐藏搜索输入，但移动版本由于 ID 不唯一而无法运行
【发布时间】：2021-02-15 03:17:33
【问题描述】：

我有一个显示在台式机和平板电脑上的搜索输入框。但是对于移动尺寸，它需要出现在页面的完全不同的部分和不同的布局样式中。我试过 display: none / display: block 可以很好地显示和隐藏它。但是唯一的 ID 是问题，因为 JS 文件读取它。第二个 #text-search ID（仅在移动设备上显示）被忽略且不起作用，因为：找到 2 个具有非唯一 id 的元素 #text-search

有什么建议吗？

【问题讨论】：

标签： javascript css responsive

【解决方案1】：

很遗憾，您的 HTML 无效，因为您不能在一个页面上拥有多个具有相同 ID 的元素。

推荐： 您可以访问搜索字段的 JS 文件吗？最好让代码按类而不是按 ID 识别搜索字段。是否希望将 getElementById() 替换为 getElementsByClassName()？

替代方案： 这不是一个合适的解决方案，但以下代码将在 ID 为 #text-search 的元素第一次出现在页面上时删除...

$("#text-search").remove();

祝你好运！让我知道进展如何。 :-)

【讨论】：

布拉德感谢您的回复！我在 JS 中找到了两个实例。这是我尝试过的，但它似乎破坏了搜索：Changed: document.getElementById('text-search').value = contraFilters.search; 收件人： document.getElementByClassName('text-search').value = contraFilters.search; 更改： d3.select('#text-search') 到： d3.select('text-search')
将“getElementByClassName”更改为“getElementsByClassName”（注意“Elements”中的复数形式）。另外，将“select('text-search')”更改为“select('.text-search')”。
好消息。第一个实例现在作为一个类再次工作。但是第二个实例（移动）仍然不是。这是我的代码：<div class="hiddenFiltersMobile"> <input class="text-search" placeholder="Search..." style="width: 120px"/> </div><div class="filters mobileFiltersPosition"> <div style="float: left;"> <input class="text-search" placeholder="Search..." style="width: 115px"/> <i class="icon-download" style="font-size: 26px; color: #add8e6;"></i> </div> </div>
我敢打赌，因为我们没有为您的搜索字段的所有实例运行 JS 循环。如果您可以将您的 JS 文件或与您的搜索字段相关的任何 JS 发送给我，我们可以解决这个问题。
当然。这是 main.js：link