jQuery :visible无法找到元素

Question

我有一个页面，在某些屏幕尺寸下，有一个文本输入框，而在其他屏幕尺寸下则变为一个选择框。

挑战在于：我想要获取输入框或选择框的值，并在键盘按键或更改时进行操作，同时避免重复代码。因此，我使用相同的ID命名这些元素，因为它们不会同时显示，然后通过如下方式查找元素：例如，使用#ID:visible进行查找。

以下是代码：

$('#test:visible').on('keyup change', function(){
 alert($(this).val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div style="display: none">
 <input id="test">
</div>
<select id="test">
 <option value="10">10</option>
 <option value="20">20</option>
</select>

问题

这根本不起作用。我已经阅读了jQuery可见选择器页面，看起来我是按照正确的方式进行操作，但警报根本没有触发。

我是否误解了它的工作原理？

- StudioTime

---

然而，您可以创建一个类并尝试它。 - Sudipta Mondal

ID是单数形式... 这就是问题所在。 - epascarello

即使它们不可见，具有“visibility：hidden”的元素仍会占用DOM上的空间。因此，您不能具有相同ID的多个元素。 - Antonio Manente

Answer 1

因此，我给这些元素赋予相同的ID，知道它们永远不会同时可见。

不幸的是，实际情况并非如此。无论元素是否可见，在同一文档范围内，您都不能重复使用id属性。您需要使用类来将多个元素分组：

$('.test:visible').on('keyup change', function(){
    alert($(this).val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div style="display: none">
    <input class="test">
</div>
<select class="test">
    <option value="10">10</option>
    <option value="20">20</option>
</select>

- Rory McCrossan

---

嗯，是的，我把它们改成类了，现在一切都正常 - 人生经验啊！谢谢！ - StudioTime

没问题，很高兴能帮忙。 - Rory McCrossan