javascript – jQuery：如何选择选项卡中显示的输入字段

我遇到了一种情况,我想在其他导航选项卡中选择未隐藏和可见的输入元素.

我使用以下代码来选择输入字段

$("input[type!=hidden]").each(function(){
        ......
    });

但是,它选择使用jQuery.hide()函数隐藏的输入字段,即visibility none.在这里,我隐藏了输入元素的父母,即

如果我尝试再次使用visibility属性进行过滤,jQuery会将非活动(非当前)导航选项卡中的输入元素视为不可见.因此,未选择非活动选项卡的输入字段.

$("input[type!=hidden]").filter(:visible).each(function(){
            ......
        });

如何在此方案中选择输入字段？

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

  <script type="text/javascript">
     $(document).ready(function(){
      
      $("#three").hide();  //Hiding div element
      
        $("button").click(function(){
            $("input:not([type='hidden'])").each(function(){
                $(this).val("2");
            });
          $("#output").html("Output: " + $("#one").val() + $("#two").val() + $("#four").val());
        });
    });
    </script>

    <html>
      <body>
      <ul class="nav nav-tabs " role="tablist">
         <li class="nav-item active">
           <a class="nav-link" data-toggle="tab" href="#first" role="tab">First</a>
          </li>
          <li class="nav-item" role="presentation">
             <a class="nav-link" data-toggle="tab" href="#second" role="tab">Second</a>
          </li>
      </ul>

    <div class="tab-content" id="tab-contents">
      <div class="tab-pane active" id="first" role="tabpanel">    
        <input id="one" type="text" value="1"><br>    
        <button>Test</button>
      </div>
      <div class="tab-pane" id="second" role="tabpanel">    
        <input id="two" type="text" value="1"><br>
        <div id="three">
          <input id="four" type="text" value="1"> 
        </div>   
      </div>
     </div>
        Answer Should be : 221  (It should not change the hidden value)
        <div id="output"></div>
        </body>
      </html>

解决方法:

应用于输入和输出的jquery.hide()之间存在根本区别. a< input type =“hidden”>

> jquery.hide()的作用是将输入元素的display属性设置为none.
> $(“input [type =’hidden’]”)的作用是搜索具有值隐藏的type属性的所有输入元素.

因此,当您隐藏input元素或其父元素时,它不会影响input元素的type属性,它只将display属性设置为none.

要使代码正常工作,必须手动修改input元素的type属性.

参考代码：

$(document).ready(function() {
  $("#four").attr("type", "hidden");

  $("button").click(function() {
    $("input:not([type='hidden'])").each(function() {
      $(this).val("2");
    });
    $("#output").html("Output: " + $("#one").val() + $("#two").val() + $("#four").val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<ul class="nav nav-tabs " role="tablist">
  <li class="nav-item active">
    <a class="nav-link" data-toggle="tab" href="#first" role="tab">First</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" data-toggle="tab" href="#second" role="tab">Second</a>
  </li>
</ul>

<div class="tab-content" id="tab-contents">
  <div class="tab-pane active" id="first" role="tabpanel">
    <input id="one" type="text" value="1">
    <br>
    <button>Test</button>
  </div>
  <div class="tab-pane" id="second" role="tabpanel">
    <input id="two" type="text" value="1">
    <br>
    <div id="three">
      <input id="four" type="text" value="1">
    </div>
  </div>
</div>
Answer Should be : 221 (It should not change the hidden value)
<div id="output"></div>

javascript – jQuery：如何选择选项卡中显示的输入字段

相关推荐