jq "좋아요" 및 "싫어요" 코드 공유

을 달성하려면 JQ를 좋아하고 싫어하세요.스타일은 다음과 같습니다.


Node.js 코드 부분: <script type="text/javascript"><br /> $(함수 () {<br /> ​​​​ //마우스가 투표 버튼 방향으로 또는 반대 방향으로 슬라이드할 때 배경 스타일 변경<br />          $("#dig_up").hover(함수 () {<br />               $(this).addClass("digup_on");<br />           }, 함수() {<br />                $(this).removeClass("digup_on");<br />          });<br />          $("#dig_down").hover(함수 () {<br />               $(this).addClass("digdown_on");<br />           }, 함수() {<br />               $(this).removeClass("digdown_on");<br />          });<br />               // 기사 ID 가져오기<br />       varaid = "{$article.art_id}";<br /> ​​​​ //초기화 데이터<br />         getdata("/votes/aid/" + 보조);<br /> <br />              // '좋아요' 클릭 시 액션 방식 <br />           $("#dig_up").click(function () {<br />                 //두 가지 방법 중 하나 선택 <br />                   //getdata("{:U('Index/votes',array('action'=>'like'))}",aid);<br />               getdata("/votes/action/like/aid/" +aid);<br />          });<br />                      // '좋아요' 클릭 시 동작 방법 <br />           $("#dig_down").click(function () {<br />                 //두 가지 방법 중 하나 선택 <br />                    //getdata("{:U('Index/votes',array('action'=>'unlike'))}",aid);<br />              getdata("/votes/action/unlike/aid/" +aid);<br />          });<br /> });<br /> 함수 getdata(url,aid) {<br /> $.getJSON(url, {aid:aid}, 함수(데이터) {<br /> If (data.success == 1) {<br />                      $("#num_up").html(data.like);<br />                  $("#bar_upspan").css("width", data.like_percent);<br />                     $("#bar_up i").html(data.like_percent);<br />                    $("#num_down").html(data.unlike);<br />                  $("#bar_downspan").css("width", data.unlike_percent);<br />                    $("#bar_down i").html(data.unlike_percent);<br />                                                           그 외 {<br />                  $("#msg").html(data.msg).show().css({'opacity': 1, 'top': '40px'}).animate({<br />                      상단: '-50px',<br />불투명도: 0<br />                  }, "느리게");<br />             }<br />          });<br /> }<br /> </script>HTML 코드 부분:
실제 상황에 따라 특정 CSS 스타일을 조정하세요<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> ~ > 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} 안에

잘썼어요 감사합니다!

68%

~ ~ > ;div id="dig_down" class="digdown"> & Lt; 스팬 ID = "num_down" & lt;/span & gt;

안타깝네요!

32%

~ ~ ~