javascript – jQuery：visible找不到元素

我有一个页面,我在某些屏幕尺寸的文本输入,更改为其他屏幕尺寸的选择.

挑战

我希望能够获得输入的值或选择keyup或更改而不必复制代码 – 所以我给元素相同的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 id="test">
</div>
<select id="test">
	<option value="10">10</option>
	<option value="20">20</option>
</select>

问题

这根本行不通. I have read the jQuery visible-selector page似乎我正在以正确的方式做事,但警报根本不会触发.

我误解了这是如何工作的吗？

解决方法:

so I give the elements the same ID, kNowing they will never be visible at the same time

不幸的是,这不是它的工作原理.无论元素是否可见,您都无法在同一文档的范围内复制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>