jQuery:visible没有找到元素

时间:2015-12-23 16:11:17

标签: javascript jquery

我有一个页面,我在某些屏幕尺寸上text input,在其他屏幕尺寸下更改为select

挑战

我希望能够在inputselect上获取keyupchange的价值而无需复制代码 - 所以我给了元素相同的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>
&#13;
&#13;
&#13;

问题

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

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

2 个答案:

答案 0 :(得分:8)

  

所以我给元素提供相同的ID,知道它们永远不会同时显示

不幸的是,这不是它的工作原理。无论元素是否可见,您都不能在同一文档的范围内复制id个属性。您需要使用类将多个元素组合在一起:

&#13;
&#13;
$('.test:visible').on('keyup change', function(){
    alert($(this).val());
})
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

您不能拥有多个ID相同的dom元素。

请参阅id="test"