Question

这是我的代码：

＆＃13;

$('button').on('click', function(){
  console.log($('.searchInput').val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='searchInput' type='text' style='display:none' />
<input class='searchInput' type='text' />
<input class='searchInput' type='text' style='display:none' />
<button>check</button>

＆＃13;

如您所见$('.searchInput')始终选择第一个输入。但我想选择一个不被隐藏的输入。我怎么能这样做？

Answer 1

使用:visible选择器。

$('button').on('click', function(){
  console.log($('.searchInput:visible').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='searchInput' type='text' style='display:none' />
<input class='searchInput' type='text' value='some' />
<input class='searchInput' type='text' style='display:none' />
<button>check</button>

Answer 2

您应该使用$('#your_modal_id').on('show.bs.modal',function (e) { var id = $(e.relatedTarget).data('id'); $(e.currentTarget).find('#the_id_inside_modal"]').val(id); });选择器。请关注以下:visible代码::

JS

Answer 3

因此，如果您有多个输入框，那么您可以通过迭代.searchInput中的每一个来获取它，并查看它是否可见[对于更通用的解决方案]。这里使用了我.is(':visible')。

＆＃13;

$('button').on('click', function(){
    $('.searchInput').each(function(){
       if($(this).is(':visible')){
          console.log($(this).val());
       }
   })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='searchInput' type='text' style='display:none' />
<input class='searchInput' type='text' />
<input class='searchInput' type='text' style='display:none' />
<button>check</button>

＆＃13;

Answer 4

我们可以使用:enabled。它将选择没有禁用属性的元素。

在你的情况下，你会这样做

$('button').on('click', function(){
  console.log($('.searchInput:enabled').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='searchInput' type='text' style='display:none' value='text one' />
<input class='searchInput' type='text' value='text two'/>
<input class='searchInput' type='text' style='display:none' value='text three' />
<button>check</button>

我对代码的html部分做了一些更改，以便更好地理解

如何选择具有块显示的输入？

4 个答案: