[英]How to count the number when click on font-awesome icon?
单击超棒字体图标时,计数有一些问题吗? 当我现在单击图标时,数字不会更改。 这是我的JSfiddle。 有谁能够帮助我?
这是我的html
<center><span id="timesClicked">0</span></center>
<i class="fa fa-heart-o btn btn-default" onclick="javascript:btnClick()"></i>
Java脚本
var timesClicked = 0;
function btnClick() {
timesClicked++;
document.getElementById('timesClicked').innerHTML = timesClicked;
return true
}
该代码将起作用。 你可以试试这个
HTML:
<div id="timesClicked">Number of Downloads: 0</div>
<i class="fa fa-heart-o" aria-hidden="true" onclick="btnClick();"></i>
JavaScript:
var cnt = 0;
function btnClick() {
cnt = parseInt(cnt) + parseInt(1);
var updatedValue = document.getElementById("timesClicked");
updatedValue.innerHTML = "Number of Downloads: " + cnt + "";
}
您需要为Font Awesome Icon添加CSS链接。 并添加
jquery-1.8.2.js
或您使用的任何其他版本。
这是一个演示的JQuery脚本。
CSS演示
#nav {
width:480px;
margin:1em auto;
}
#nav ul {
margin:1em auto;
padding:0;
font:1em "Arial Black",sans-serif;
}
#nav ul li{
display:inline;
}
#nav ul li a{
text-decoration:none;
margin:0;
padding:.25em 25px;
background:#666; color:#ffffff;
}
#nav ul li a:hover{
background:#ff9900;
color:#ffffff;
}
#nav ul li a.active {
background:#ff9900;
color:#ffffff;
}
jQuery演示
<script type="text/javascript">
$(function (){
$('#nav ul li a').each(function(){
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/')+1);
var url = $(this).attr('href');
if(url == current){
$(this).addClass('active');
};
});
});
</script>
HTML演示
<html>
<body>
<div id="nav" >
<ul>
<li><a href='index.php?1'>One</a></li>
<li><a href='index.php?2'>Two</a></li>
<li><a href='index.php?3'>Three</a></li>
<li><a href='index.php?4'>Four</a></li>
</ul>
</div>
</body>
如果愿意,可以使用JQuery,它可以帮助您获得所需的内容。
var timesClicked = 0; $(".fa-heart-o").on("click",function(){ timesClicked++; document.getElementById('timesClicked').innerHTML = timesClicked; });
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <center><span id="timesClicked">0</span></center> <i class="fa fa-heart-o btn btn-default"></i>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.