javascript - 如何在点击字形图标上显示通知右上角几秒钟？

Question

我已经成功地实现了这个带有按钮的 Bootstrap 通知教程：

教程

演示

我想改变一个小东西，而不是一个按钮，一个字形图标（来自 Font Awesome）点击它会显示成功通知。

我正在考虑在我的代码上使用 id 来执行此操作，例如：

<i class=\"fas fa-cart-arrow-down\" id=\"panier\">

完整代码：

 echo "<h4 align=\"center\"> <a href=\"$softname?additem\"><i class=\"fas fa-cart-arrow-down\" id=\"panier\"></i> $a_photo_exp[0]</a></h4>";

我尝试多次修改 JavaScript 都没有成功，现在它就像这样不起作用：

function myFunction() {
  document.getElementById("panier").bootstrapGrowl('Added to cart',{
        type: 'success',
        delay: 2000,
        });
}

我的 JavaScript 是有限的，你能解释一下如何让它工作吗？

Answer 1

看来您需要使用 jQuery 来打开通知，您可以执行以下操作来使其工作：

PHP 代码

单击链接后添加event.preventDefault()阻止重定向。

 echo "<h4 align=\"center\"> <a href=\"$softname?additem\" onclick=\"event.preventDefault(); myFunction();\"><i class=\"fas fa-cart-arrow-down\" id=\"panier\"></i> $a_photo_exp[0]</a></h4>";

JS

function myFunction() {

  $.bootstrapGrowl('Added to cart',{
        type: 'success',
        delay: 2000,
  });
}