jq '좋아요' 및 '싫어요' 코드 공유-php手册-php.cn

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

WBOY

풀어 주다： 2016-10-12 09:49:59

원래의

1239명이 탐색했습니다.

을 달성하려면 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%

~ ~ ~