如何在单击事件上使我的Wordpress站点上的此Toast消息正常工作

问题描述 投票:0回答:1

我正在努力在我的网站上使用吐司消息,只需点击一下按钮即可看到。这是下面的代码。

<html>
<head> 

<link rel="stylesheet" href="https//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>


<h2>Snackbar / Toast</h2>

<button onclick="updateit()">Show Snackbar</button>

<script src="https//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
 function updateit(){
    toastr.success('button clicked');
}
</script>
</body>
</html>

即使在函数脚本中添加事件监听器调用也不适用于我。我正在使用下面的库,它建议我使用上面代码中使用的外部脚本和样式。

https://codeseven.github.io/toastr/

我是新手,请帮我解决这个问题。另外,如果你可以帮我弄清楚如何直接在WordPress上完成它,那将是非常值得注意的。

javascript jquery html css wordpress
1个回答
0
投票

试试这段代码...有一些小错误..我修好了...检查一下..

<html>
<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>


<h2>Snackbar  Toast</h2>

<button onclick="updateit()">Show Snackbar</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
 function updateit(){
    toastr.success('button clicked');
}
</script>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.