PHP、MySql、jQuery は「好き」と「嫌い」の投票機能を実装します

CREATE TABLE IF NOT EXISTS `votes` (
 `id` int(10) NOT NULL AUTO_INCREMENT,
 `likes` int(10) NOT NULL DEFAULT '0',
 `unlikes` int(10) NOT NULL デフォルト '0',
 主キー (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;


 `votes` (`id`, `likes`, `unlikes`) 値
(1, 30, 10);

 `votes_ip` が存在しない場合はテーブルを作成 (
 `id` int(10) NOT NULL、
 `vid` int(10) NOT NULL、
 `ip` varchar(40) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

2、htmlページ部分 このページには、「好き」と「嫌い」を表す 2 つのボタン (#dig_up と #dig_down) があり、ボタンには投票数とその割合が記録されており、投票結果を非常に直感的に比較できます。

コードをコピー


3、CSSコード部分
CSS を使用してページを美しくし、diggs.png という画像を使用してさまざまなボタンの背景を配置し、各要素間の関係を配置する位置を設定する必要があります。

border:1px ソリッド #d3d3d3; カーソル:ポインタ}

.digup{background:url(diggs.png) no-repeat 4px 2px;}

.digup_on{background:url(diggs.png) ) リピートなし 4px -49px;}

#dig_up p{height:24px; color:#360}高さ:24px; 色:#f30}
.bar{幅:12px; 境界線:1px; 位置:相対; }
.bar スパン{表示:ブロック; 高さ:12px; }
.bar i{位置:絶対; 左:104px;}
#bar_up スパン{背景:#360}
#bar_down スパン: # f60}
#msg{position:absolute; right:20px; font-size:18px; color:#f00}


2、jquery部分
この例も jQuery に依存しているため、最初に jquery ライブラリ ファイルをページにロードすることを忘れないでください。
まず、jQuery は、マウスが 2 つの投票ボタンの上をそれぞれスライドすると変化する背景画像を処理する必要があります。これは、addClass() と RemoveClass() によって実現されます。





$(function(){
 //マウスが投票ボタンに近づいたり遠ざかったりするときに背景のスタイルを変更します
 $("#dig_up").hover(function(){
 $(this) .addClass( "digup_on");

$(this).removeClass("digdown_on")

});

 //「いいね」をクリックしたとき
 $("#dig_up").click(function(){
 getdata("do.php?action=like",1);
 }); " "ダウンロード"
 $("#dig_down").click(function(){
 getdata("do.php?action=unlike",1);
 });
});



コードをコピー


次に、データを初期化します。つまり、ページがロードされた後、投票数と割合を含む最初の投票結果が表示されます。
データを取得する操作をカスタム関数 getdata() に記述し、さまざまなリクエスト アドレスと ID パラメーターを渡すことでデータのロードを完了します。
getdata() 関数では、バックグラウンド処理の戻り結果に従って URL に送信され、投票が成功すると、ページ内の対応する要素のコンテンツ (投票数や投票数など) が変更されます。割合。
 

function getdata(url,sid){
 $.getJSON(url,{id:sid},function(data){
 if(data.success==1){//投票は成功しました
 $( "#num_up").html(data.like);
 //幅を制御して進行状況バーの効果を表示します
 $("#bar_up span").css("width",data.like_percent); $(" #bar_up i").html(data.like_percent);
 $("#num_down").html(data.unlike);
 $("#bar_down span").css("width",data. like_percent);
 $("#bar_down i").html(data.unlike_percent);
 }else{//投票は失敗しました bbs.it-home.org
 $("#msg").html(data.msg) .show( ).css({'opacity':1,'top':'40px'})
 .animate({top:'-50px',opacity:0}, "遅い"); ;
}


コードをコピー

$action = $_GET['action'];
$ip = get_client_ip; () ;//IP を取得

if($action=='like'){//いいね
 likes(1,$id,$ip)
}elseif($action=='unlike'); Dislike
 likes(0,$id,$ip);
}else{
 echo jsons($id);


コードをコピー


 関数 likes() は、「いいね」と「嫌い」投票モジュールの場合、最初のステップは、ユーザー IP がすでに投票しているかどうかを判断することです。ユーザー IP が投票している場合は、対応するプロンプトが直接返されます。ユーザー IP に投票レコードがない場合は、投票テーブルが更新されます。 、対応する投票数が 1 増加され、ユーザーの IP が votes_ip テーブルに挿入されます。操作が成功すると、jsons() を呼び出して投票後の投票数や割合などのデータを出力します。それ以外の場合は、操作が失敗したことを示すプロンプト メッセージを入力します。