Question

我有一个由按钮触发的警报，该警报在3秒钟后消失。

每次单击按钮时，如何显示该警报？目前只能使用一次。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ex1">
  <button id="alert-trigger" data-dismiss="alert" class="btnClick">
    Trigger Alert
  </button>

  <div id="example" class="alert" role="alert"></div>

  <script type="text/template" id="alert-template">
    <p>
      <span lang="da">Merhaba</span>,
      hello,
      <span lang="ja">Hallo</span>
    </p>
  </script>
  <script type="text/javascript">
    $(document).ready(function() {
      window.setTimeout(function() {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function() {
          $(this).remove();
        });
      }, 3000);
    });
  </script>
</div>

Answer 1

目前您没有将任何点击事件绑定到该<button>，我认为您正在寻找的是这样的东西：

 $(document).ready(function() {
    //First hide the alert :
      $("#example").hide();
      
    // then bind the click :
    $("#alert-trigger").on("click", function () {
      
      $("#example").fadeIn(); // Shows the alert
      
      window.setTimeout(function() {
        $("#example").fadeOut(); // hides it again
      }, 3000);
      
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ex1">
  <button id="alert-trigger" data-dismiss="alert" class="btnClick">
    Trigger Alert
  </button>

  <div id="example" class="alert" role="alert">I'm an ALERT !</div>
  
</div>

Answer 2

使用 pure javaScript ，只需将#example元素的默认不透明度设置为0，每当单击#alert-trigger按钮并使用{{ 3}}方法，可在1秒后将其更改回0。

使用 jQuery 时，默认情况下仅隐藏#example元素，然后只需使用setTimeout()方法在单击时使其淡入并使用fadeIn()方法以及setTimeout()方法可在设定的秒数后再次淡出元素。

检查并运行以下代码段，以获取上述内容的实际示例：

纯JavaScript方法：

/* JavaScript */

const btn = document.getElementById("alert-trigger");
const box = document.getElementById("example");

btn.addEventListener("click", function(){
	box.style.opacity = 1;
  setTimeout(function(){box.style.opacity = 0}, 1000);
});

/* CSS */

body {text-align: center;}#alert-trigger{background-color: green; padding: 5px; color: #FFF;}

#example {background-color: grey;padding: 10px;margin: 10px 0px;
  opacity:0; /* initial opacity value set to 0 */
  transition: all 1s; /* will fade the element instead of hiding/showing the element instantly */
}

<!-- HTML -->

<button id="alert-trigger">Trigger Alert</button>

<div id="example" >
  <h2>Box Content Here:</h2>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quia dolore cumque aliquid eaque nisi, eos praesentium delectus tempore quidem? Iure tenetur cupiditate, laborum, saepe aut alias voluptatem impedit molestias.</p>
</div>

jQuery方法：

/* JavaScript */

$("#alert-trigger").on("click", function(){
	$("#example").fadeIn(); // fade in the example div
  
  setTimeout(function(){
  	$("#example").fadeOut(); // fade out the example div
  }, 1000);
})

/* CSS */

#example {display:none;} /* initially hide it by default */

<!-- HTML -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="alert-trigger">Trigger Alert</button>

<div id="example" >
  <h2>Box Content Here:</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quia dolore cumque aliquid eaque nisi, eos praesentium delectus tempore quidem? Iure tenetur cupiditate, laborum, saepe aut alias voluptatem impedit molestias.</p>
</div>

Answer 3

> <script> $(document).ready(function(){   $("button").click(function(){
>     $("p").toggle();   }); }); </script> </head> <body>
> 
> <button>Toggle between hiding and showing the paragraphs</button>
> 
> <p>This is a paragraph with little content.</p>

再次单击按钮后如何显示警报？

3 个答案:

纯JavaScript方法：

jQuery方法：