jq コード共有の「好き」と「嫌い」
- WBOYオリジナル
- 2016-10-12 09:49:591241ブラウズ
好き嫌いJQ達成
スタイルは以下の通りです
js コード部分: <script type="text/javascript"><br />
$(関数() {<br />
//マウスを投票ボタンに近づけたり遠ざけたりするときに背景のスタイルを変更します<br />
$("#dig_up").hover(function () {<br />
$(this).addClass("digup_on");<br />
}、関数 () {<br />
$(this).removeClass("digup_on");<br />
});<br />
$("#dig_down").hover(function () {<br />
$(this).addClass("digdown_on");<br />
}、関数 () {<br />
$(this).removeClass("digdown_on");<br />
});<br />
// 記事IDを取得します<br />
var aid = "{$article.art_id}";<br />
//初期化データ<br />
getdata("/votes/aid/" + aid);<br />
<br />
//「いいね」をクリックしたときのアクション方法<br />
$("#dig_up").click(function () {<br />
// 2 つの方法のいずれかを選択します<br />
//getdata("{:U('Index/votes',array('action'=>'like'))}",aid);<br />
getdata("/votes/action/like/aid/" + aid);<br />
});<br />
// 「嫌い」をクリックしたときのアクション方法<br />
$("#dig_down").click(function () {<br />
// 2 つの方法のいずれかを選択します<br />
//getdata("{:U('Index/votes',array('action'=>'unlike'))}",aid);<br />
getdata("/votes/action/unlike/aid/" + Ai);<br />
});<br />
});<br />
関数 getdata(url, 補助) {<br />
$.getJSON(url, {aid: 援助}, 関数 (データ) {<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 steam").css("width", data.unlike_percent);<br />
$("#bar_down i").html(data.unlike_percent);<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">
<br>
& Lt; div ID = "dig_up" クラス = "digup" & gt;
で
<p>よく書かれています、感謝します! </p>
<br>
＆lt; div id = "dig_down" class = "digdown"＆gt;<br>
で
<p>残念です！ </p>
<br>
＆lt; div id = "msg"＆gt;＆lt;/div＆gt;<br>
</div>
<br>CSS コード部分: <br>.digg{width:530px;margin:20px auto;position:relative}<br>
#dig_down,#dig_up{幅:200px;高さ:48px;マージン:10px;位置:相対;ボーダー:1px ソリッド #d3d3d3;パディング左:42px;カーソル:ポインター;浮動小数点:左}<br>
.digup{background:url(../../images/diggs.png) リピートなし 4px 2px}<br>
.digup_on{背景:url(../../images/diggs.png) リピートなし 4px -49px}<br>
.digdown{背景:url(../../images/diggs.png) リピートなし 4px -102px}<br>
.digdown_on{背景:url(../../images/diggs.png) リピートなし 4px -154px}
#num_down,#num_up{位置:絶対;右:6ピクセル;上:18ピクセル;フォントサイズ:20ピクセル}
#dig_up p{高さ:24px;線の高さ:24px;色:#360}<br>
#dig_down p{高さ:24px;線の高さ:24px;色:#f30}<br>
.bar{幅:100px;高さ:12px;行の高さ:12px;ボーダー:1px 実線 #f0f0f0;位置:相対;テキスト配置:センター}<br>
.bar スパン{表示:ブロック;高さ:12px}<br>
.bar i{位置:絶対;上:0;左:104px}<br>
#bar_up スパン{背景:#360}<br>
#bar_ダウンスパン{background:#f60}<br>
#msg{position:absolute;right:20px;top:40px;font-size:18px;color:red}<br>diggs.png 画像添付ファイルがアップロードされました <br>
<br>
ディグス.png
<br>( 2.48 KB ダウンロード: 4 回 )<br>
<br><br>
