Question

我有以下php代码可回显警报。

echo '<div class="alert alert-warning alert-dismissible" id = "noOperator" role="alert" >
      <strong>Not certified! </strong>'.$checkBoxValue.' is not certified to use '.$needleType.'
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span></button>
      </div>';

但是我想在警报显示后关闭它。因此，我再次提出以下意见。

echo ' <script>
      $("#noOperator").fadeTo(2000, 500).slideUp(500, function(){
           $("#noOperator").slideUp(500);
      });
       </script>';

但是它不起作用

有人知道为什么吗？

Answer 1

为什么不使用PHP回显代码就不使用JQuery。并检测元素是否可见以触发hide函数。或仅使用警报框的关闭按钮即可。

setTimeout(function() {
  if ($("#noOperator").is(":visible")) {
    //$('#noOperator').hide();
     $("#noOperator").animate({
        'margin-top' : "-50%",
        'opacity' : '0',
        'visibility' : 'hide'
      },1000);
   
    console.log("hiding now")
  }
  
}, 1000); // hide the element if visible after 1 second


//or just use the button on the alert box
//if you want it just uncomment below

//$('.close').click(function(){
//    $('#noOperator').hide();
//});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="alert alert-warning alert-dismissible" id="noOperator" role="alert">
  <strong>Not certified! </strong>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span></button>
</div>

如果您将其更改为以下代码，则您的代码将起作用：

echo '<script>
         setTimeout(function() {
            $("#noOperator").fadeTo(2000, 500).slideUp(500, function(){
              $("#noOperator").slideUp(500);
            });
         }, 3000);
      </script>';

如何使用php触发元素隐藏

1 个答案: