jq Code-Sharing mit „Gefällt mir' und „Gefällt mir nicht'.
- WBOYOriginal
- 2016-10-12 09:49:591241Durchsuche
JQ mögen und nicht mögen, um
zu erreichenDer Stil ist wie folgt:
js-Codeteil: <script type="text/javascript"><br />
$(function () {<br />
//Ändern Sie den Hintergrundstil, wenn die Maus zur Abstimmungsschaltfläche hin und von dieser weg bewegt wird<br />
$("#dig_up").hover(function () {<br />
$(this).addClass("digup_on");<br />
}, Funktion () {<br />
$(this).removeClass("digup_on");<br />
});<br />
$("#dig_down").hover(function () {<br />
$(this).addClass("digdown_on");<br />
}, Funktion () {<br />
$(this).removeClass("digdown_on");<br />
});<br />
// Artikel-ID abrufen<br />
var Aid = "{$article.art_id}";<br />
//Initialisierungsdaten<br />
getdata("/votes/aid/" aid);<br />
<br />
// Aktionsmethode beim Klicken auf „Gefällt mir“ <br />
$("#dig_up").click(function () {<br />
//Wählen Sie eine der beiden Methoden <br />
//getdata("{:U('Index/votes',array('action'=>'like'))}",aid);<br />
getdata("/votes/action/like/aid/" aid);<br />
});<br />
// Aktionsmethode beim Klicken auf „Gefällt mir nicht“ <br />
$("#dig_down").click(function () {<br />
//Wählen Sie eine der beiden Methoden <br />
//getdata("{:U('Index/votes',array('action'=>'unlike'))}",aid);<br />
getdata("/votes/action/unlike/aid/" aid);<br />
});<br />
});<br />
Funktion getdata(url,hilfe) {<br />
$.getJSON(url, {aid:aid}, function (data) {<br />
Wenn (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 />
sonst {<br />
$("#msg").html(data.msg).show().css({'opacity': 1, 'top': '40px'}).animate({<br />
oben: '-50px',<br />Deckkraft: 0<br />
}, „langsam“);<br />
}<br />
});<br />
}<br />
</script>HTML-Codeteil:
Bitte passen Sie den spezifischen CSS-Stil entsprechend Ihrer tatsächlichen Situation an<div class="digg">
<code class="prettyprint linenums lang-php"><div>
<br>
<div>
<br>
<span>133</span><br>
<p>写的好，我很赞！</p>
<br>
<div>
<span></span><i>68%</i>
</div>
<br>
</div>
<br>
<div>
<br>
<span>42</span><br>
<p>太差劲了！</p>
<br>
<div>
<span></span><i>32%</i>
</div>
<br>
</div>
<br>
<div></div>
<br>
</div>
& Lt; div id = "dig_up" class = "digup" & gt; .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}<br>
.digdown_on{background:url(../../images/diggs.png) no-repeat 4px -154px}<br>
#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}
In
Gut geschrieben, ich schätze es!
Schade!
.digg{width:530px;margin:20px auto;position:relative}