一日一回ボタンを押せるといった機能をjavascriptつけることがあったのでそのメモ。
Cookieで制御しているため、Cookie消せば何度でも投票できるけれど、それはサーバー側でIPなどで弾くしかないかな。
って感じなので、そこを考えない簡単なプログラム
表にボタンを設置する
<button type="button" class="like_button" data-id="1">いいね!</button>
<button type="button" class="like_button" data-id="2">いいね!</button>
まずボタンを押したらCookieを保存するjavascript
function cookiesave() {
//ボタンを押したらdisabledにして押せなくする
$(this).prop("disabled", true);
//cookieの有効時間指定
var date = new Date();
var expire = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
document.cookie = 'likeid_'+ $(this).data('id') +'=1; path=/; expires=' + expire.toUTCString();
var self = this;
//php側でデータを保存する
$.ajax({
type: 'POST',
url: '/post.php',
data: {
id: $(this).data('id')
}
}).done(function (data) {
//押した後の動作
after_like(self);
}).fail(function (data) {
});
}
//ボタンにイベントを付ける
$('.like_button').on('click', cookiesave);
後で使うので関数にしておく
function after_like(self) {
//ボタンをdisabledにして押せないように
$(self).prop("disabled", true);
}
次ページに訪れた際に押せなくする、状態を更新するための処理
//Cookieが保存されているか調べる
var target_cookie = function (self) {
var name = 'likeid_'+$(self).data('id');
var result = null;
var cookieName = name + '=';
var allcookies = document.cookie;
var position = allcookies.indexOf(cookieName);
if (position != -1)
{
var startIndex = position + cookieName.length;
var endIndex = allcookies.indexOf(';', startIndex);
if (endIndex == -1)
{
endIndex = allcookies.length;
}
result = decodeURIComponent(
allcookies.substring(startIndex, endIndex));
}
return result;
};
//ボタンに状態を反映させる
$('.like_button').each(function () {
if (target_cookie(this) == 1) {
after_like(this);
}
});
コメント