jq Code-Sharing mit „Gefällt mir' und „Gefällt mir nicht'.

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!

68%

                                                                                                                                                                                                                                                                                                            

& Lt; span id = "num_down" & gt; 42 & lt;/span & gt;

Schade!

32%

                                                                                                                                                                                                                                                                                                                                            

CSS-Codeteil: .digg{width:530px;margin:20px auto;position:relative} #dig_down,#dig_up{width:200px;height:48px;margin:10px;position:relative;border:1px solid #d3d3d3;padding-left:42px;cursor:pointer;float:left} .digup{background:url(../../images/diggs.png) no-repeat 4px 2px} .digup_on{background:url(../../images/diggs.png) no-repeat 4px -49px} .digdown{background:url(../../images/diggs.png) no-repeat 4px -102px} .digdown_on{background:url(../../images/diggs.png) no-repeat 4px -154px} #num_down,#num_up{position:absolute;right:6px;top:18px;font-size:20px} #dig_up p{height:24px;line-height:24px;color:#360} #dig_down p{height:24px;line-height:24px;color:#f30} .bar{width:100px;height:12px;line-height:12px;border:1px solid #f0f0f0;position:relative;text-align:center} .bar span{display:block;height:12px} .bar i{position:absolute;top:0;left:104px} #bar_up span{background:#360} #bar_down span{background:#f60} #msg{position:absolute;right:20px;top:40px;font-size:18px;color:red}diggs.png Bildanhang wurde hochgeladen diggs.png ( 2,48 KB Download: 4 Mal)