jq 'like' and 'dislike' code sharing
- WBOYOriginal
- 2016-10-12 09:49:591230browse
Like and dislike JQ to achieve
The style is as follows:
js code part: <script type="text/javascript"><br />
$(function () {<br />
//Change the background style when the mouse slides towards and away from the voting button<br />
$("#dig_up").hover(function () {<br />
$(this).addClass("digup_on");<br />
}, function () {<br />
$(this).removeClass("digup_on");<br />
});<br />
$("#dig_down").hover(function () {<br />
$(this).addClass("digdown_on");<br />
}, function () {<br />
$(this).removeClass("digdown_on");<br />
});<br />
// Get article ID<br />
var aid = "{$article.art_id}";<br />
//Initialization data<br />
getdata("/votes/aid/" + aid);<br />
<br />
//Method of action when clicking "Like"<br />
$("#dig_up").click(function () {<br />
//Choose one of the two methods<br />
//getdata("{:U('Index/votes',array('action'=>'like'))}",aid);<br />
getdata("/votes/action/like/aid/" + aid);<br />
});<br />
// Action method when clicking "Dislike"<br />
$("#dig_down").click(function () {<br />
//Choose one of the two methods<br />
//getdata("{:U('Index/votes',array('action'=>'unlike'))}",aid);<br />
getdata("/votes/action/unlike/aid/" + aid);<br />
});<br />
});<br />
Function getdata(url, aid) {<br />
$.getJSON(url, {aid: aid}, function (data) {<br />
If (data.success == 1) {<br />
$("#num_up").html(data.like);<br />
$("#bar_up span").css("width", data.like_percent);<br />
$("#bar_up i").html(data.like_percent);<br />
$("#num_down").html(data.unlike);<br />
$("#bar_down span").css("width", data.unlike_percent);<br />
$("#bar_down i").html(data.unlike_percent);<br />
} else {<br />
$("#msg").html(data.msg).show().css({'opacity': 1, 'top': '40px'}).animate({<br />
top: '-50px',<br />Opacity: 0<br />
}, "slow");<br />
}<br />
});<br />
}<br />
</script>HTML code part:
Please adjust the specific CSS style according to your actual situation<div class="digg">
<br>
<div id="dig_up" class="digup">
<br>
in
<p>Well written, I appreciate it! </p>
<br>
<div id="dig_down" class="digdown">
<br>
in
<p>Too bad! </p>
<br>
<div id="msg"></div>
<br>
</div>
<br>CSS code part: <br>.digg{width:530px;margin:20px auto;position:relative}<br>
#dig_down,#dig_up{width:200px;height:48px;margin:10px;position:relative;border:1px solid #d3d3d3;padding-left:42px;cursor:pointer;float:left}<br>
.digup{background:url(../../images/diggs.png) no-repeat 4px 2px}<br>
.digup_on{background:url(../../images/diggs.png) no-repeat 4px -49px}<br>
.digdown{background:url(../../images/diggs.png) no-repeat 4px -102px}
.digdown_on{background:url(../../images/diggs.png) no-repeat 4px -154px}<code class="prettyprint linenums lang-php">
#num_down,#num_up{position:absolute;right:6px;top:18px;font-size:20px}<br>
#dig_up p{height:24px;line-height:24px;color:#360}<br>
#dig_down p{height:24px;line-height:24px;color:#f30}<br>
.bar{width:100px;height:12px;line-height:12px;border:1px solid #f0f0f0;position:relative;text-align:center}<br>
.bar span{display:block;height:12px}<br>
.bar i{position:absolute;top:0;left:104px}<br>
#bar_up span{background:#360}<br>
#bar_down span{background:#f60}<br>
#msg{position:absolute;right:20px;top:40px;font-size:18px;color:red}<br>diggs.png Image attachment has been uploaded <br>
<br>
diggs.png
<br>( 2.48 KB Download: 4 times )<br>
<br>
