如何排除在 jQuery 选择器中不可见的元素？

Question

我有一个带有复选框的表单元素，其中包含“昵称”切换字段。我正在验证所有字段都不为空，并在所有字段都输入值后启用页面上的按钮。

但是，我有一些用户看不到的输入字段，因为它们位于具有 display:none; CSS 属性的 <div> 元素中。如何在 jQuery 中排除这些元素，只对可见的字段进行验证？

HTML

<input name="cvv" type="text">
<span class="checkbox"></span>
<p>Save this card for faster transactions<br>Note: Your CVV number will not be stored</p> 
<div class="col-md-6 nicknameBlock" id="nickNameToggle">    
    <input name="" type="text" placeholder="Nick Name" class="textbox textbox50 required">
</div>
<div class="row center">
    <a href="javascript:" class="bt btblue disableClick" id="submitBtn">
    <img src="images/icon_pay.png" > PAY</a>
</div>

CSS

.nicknameBlock{
  display:none;
}

JavaScript

activatePayButton('submitBtn'); 
function activatePayButton(formId){
    $form = $('#'+formId);     
    $form.find(':input').on('change keyup blur', function(event) {
        var disable = false;      
        $form.find("input[type!='hidden']").each(function(i, el) { 

        });
    });
}

Answer 1

好的！让我们逐行看：

activatePayButton('submitBtn'); // this is the id of anchor which has img
 function activatePayButton(formId){
     $form = $('#'+formId);  // so this selector selects the anchor not form element   
     $form.find(':input').on('change keyup blur', function(event) { 
    // as $form is an anchor which has only img as child
    // you don't have any input to bind any event on it
       var disable = false;      
       $form.find("input[type!='hidden']").each(function(i, el) { 
          // that is why this doesn't get executed.
       });
     });
 }

Answer 2

真的很简单，真的

if($(".nicknameBlock").is(":visible")) { alert("Im visible now") }