JQuery 查找哪个是可见的

Question

<select id="milesAway">
    <option id="5" value="5">5 miles</option>
    <option id="10" value="10">10 miles</option>
    <option id="25" value="25">25 miles</option>
    <option id="50 value="50">50 miles</option>
    <option id="100" value="100">100 miles</option>
    <option id="250" value="250">250 miles</option>
    <option id="500" value="500">500 miles</option>
</select>
<input type="text" id="zipCode" />
<input type="text" id="cityState" class="cityState" />

因此，在任何时间点，只会显示这 3 个可用输入中的一个。它们都是由 .show() 和 .hide() 控制的

我确实使用 JQuery 来找出显示的是哪一个并获取它的 id。

谢谢！

Answer 1

你可以做

$(':input:visible') //This will selects all inputs on the page. You can narrow this down by specifying an ID that wraps the input you are looking or.

你也可以通过做来检查输入是否可见

$('#cityState').is(':visible') 

Answer 2

http://jsfiddle.net/RSGrW/1/

阅读评论后的第一次更新：

var id = $("#milesAway:visible option:selected, #zipCode:visible, #cityState:visible").attr('id');

因为我看到了你将 ids 放入选项中，我想您希望返回它。这是仅输入或选择 ID 的替代方案。

var id = $("#milesAway:visible, #zipCode:visible, #cityState:visible").attr('id');

Answer 3

$('option:visible');

将匹配所有未隐藏的选项元素，隐藏我的意思是显示：无，我不认为可见性：隐藏重要！您必须在“选择器”部分下的 jQuery 文档中仔细检查这一点

Answer 4

开始吧：

$('select:not(:visible)');

我建议为每个元素添加一个类以轻松选择它们：

$('.toggleInputs:not(:visible)');