javascript - 在 javascript 函数中显示特定的 div

Question

我想知道如何仅在特定功能上显示特定 div。我想在名为“validateForm()”的 javascript 函数中显示以下名为“cd-popup”的 div。

<script type="text/javascript">
   function validateForm() {
      var x = document.getElementById("email-id").value;
      if ( x == null || x == "" ) {
         $('.cd-popup').addClass('is-visible');
      }
   }
</script>
<div class="cd-popup" role="alert">
   <div class="cd-popup-container" style="margin-left: 10%;">
      <p style="color: #5b5b5b;">Are you sure you want to delete this element?</p>
      <a href="#0" class="cd-popup-close img-replace">Close</a>
      <!-- <img id="close"  style="position: absolute;right: -14px;top: -14px; cursor: pointer;" onclick ="div_hide()"> -->
   </div>
   <!-- cd-popup-container -->
</div>
<!-- cd-popup -->

此外，我还输入了电子邮件 div，通过“onblur”调用该函数

<!-- EMAIL -->
<div class="col-lg-6 col-xs-6">
   <div class="form-group">
       <input type="email" class="form form-control email requiretop" placeholder="Your email" name="email" id="email-id" onblur="return validateForm()">
   </div>
</div>

我想仅在调用 validateForm() 方法时显示 div cd-popup

Answer 1

这是一个简单的显示隐藏 div 现象，jQuery .show() 和 .hide() 元素是对此的完美解决方案。只需按以下方式修改您的脚本:

<script type="text/javascript">
function validateForm() {
    var x = document.getElementById("email-id").value;
    if ( x == null || x == "" ) {
        $('.cd-popup').show();
    }
    else{
        $('.cd-popup').hide(); 
    }
}

</script>