Question

我有一个有人写过的代码，我试图解决这个问题。 jquery文档说＆＃34;可见选择器选择当前可见的每个元素。＆＃34;代码看起来像这样：

<form action="register.php" method="post">
   <div class="error-test e-name">Enter Name</div>
   <input name="name" type="text"/>
   <div class="error-test e-email">Enter Email</div>
   <input name="email" type="email"/>
   <div class="error-test e-password">Enter Password</div>
   <input name="password" type="password"/>
   <button class="register" type="submit">Register</button>
</form>

jquery代码看起来像这样：

$(document).on('click', '.register', function(d)
    {
     if ($('.error-test').is(":visible") )
       {
        d.preventDefault();
        alert('please fill the form properly before submitting.');
       }
    else
       {
        // do something
       }

And the CSS:
<style>
   .error-test
       {
        display: none
       }
</style>

所以我的问题是，有人可以解释一下这行是做什么的：if（$（＆＃39; .error-test＆＃39;）。是（＆＃34 ;:visible＆＃34;））

并解释为什么需要将css设置为display：none。我无法绕过：visible选择器。提前谢谢。

Answer 1

if ($('.error-test').is(":visible") )检查屏幕上当前是否显示任何错误消息。如果是，则d.prevenDefault()停止提交并显示警报。 .error-test最初有display:none，因此它不在屏幕上，js代码的某些部分必须使其可见。

Answer 2

$('.error-test').is(":visible")查找具有class：error-test的元素，并将其包装在jQuery对象中。之后，方法is检查对象是否在DOM中可见。如果为true，则if子句将运行。

在CSS中，元素的显示设置为无，它不会出现在页面上，因此visible。

基本上整个代码的作用是：检查是否有任何错误div可见，如果是真正的中止和警报，如果错误继续发布表单。

jquery：可见性选择器使用情况

2 个答案: