プロが教える店舗＆オフィスのセキュリティ対策術

指定のテキストをクリックすると数字が増える。

解決済

  • 質問者：rabbit-kimura
  • 質問日時：
  • 回答数：5件

質問失礼いたします。
前提としまして、当方JAVAスクリプトを利用したことがございません。
何卒ご了承下さい。


下記のような表があります。
＋──────＋───＋
│ウィンドウズ　│好き（9）│
＋──────＋───＋
│アップル　　　│好き（5）│
＋──────＋───＋
│アンドロイド　│好き（1）│
＋──────＋───＋

「好き」というテキストをクリックすると（）内の数字が増えるという仕組みを作りたいと思っています。

合わせて、下記のようなことが条件となります。

・表のデータはデータベースよりPHPを利用して表示します
・クリックしてもページは移動したくありません
・上記に合わせて、数字もリアルタイムで増やしたいです

画面を切り替えずに数字を増やすという点ではjQueryが良いのかとこちらに質問させていただきました。

また、もし他に良い方法などありましたら、jQuery以外でも良いのでお教え下さい。


宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.3ベストアンサー

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



JavaScriptを利用したことないとのことですのでJavaScriptの実装例を回答します。

実際の動作はこちらで確認してみてください。
サーバ側のカウントは簡易的にセッションを利用しています、
また表の表示は静的です。
実際はDBから読み出して表の作成と、送信先では一致するid等でレコードをupdateすれば良いと思います。

http://hppg.moe.hm/okwave/qa/q8128196/

php側はpostにてidを受け取って(例の場合は0～2)カウントアップしてJSON形式で返しています。


==== index.html

<?php

session_start();
if ( !isset($_SESSION['likenumber']) ) {
$_SESSION['likenumber'] = array(0,0,0);
}

$windows = $_SESSION['likenumber'][0];
$apple = $_SESSION['likenumber'][1];
$android = $_SESSION['likenumber'][2];

?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jq …
<script type="text/javascript">
$().ready ( function() {
$('a.btn').click ( function() {
// クリックされたアンカーの次にある要素のdata-idを取得する
var id = $(this).next().attr('data-id');
// likenumber.phpに非同期でidを送信し、JSONとしてレスポンスを受け取る
$.post (
'likenumber.php',
{ id: id },
function ( json ) {
// json.valueに指定されたidのカウントが入っているので
// spanタグのdata-idが一致する要素のhtmlをカウントで書き換える
$('span[data-id="' + id + '"]').html ( json.value );
}
);
return false;
});
$('button').click ( function() {
$.post (
'likenumber.php',
{ id: 'reset' },
function ( json ) {
$('span[data-id]').html ( '0' );
}
);
});
});
</script>
<style type="text/css">
a.btn {
color: #0cf;
text-decoration: none;
}
</style>
</head>
<body>
<div class="wrap">
<header>
テスト
</header>
<table>
<thead>
<tr>
<th>title</th><th>like</th>
</tr>
</thead>
<tbody>
<tr>
<td>ウィンドウズ</td><td><a href="#" class="btn">好き</a>(<span class="likenumber" data-id="0"><?php echo $windows ?></span>)</td>
</tr>
<tr>
<td>アップル</td><td><a href="#" class="btn">好き</a>(<span class="likenumber" data-id="1"><?php echo $apple ?></span>)</td>
</tr>
<tr>
<td>アンドロイド</td><td><a href="#" class="btn">好き</a>(<span class="likenumber" data-id="2"><?php echo $android ?></span>)</td>
</tr>
</tbody>
</table>
<button type="button">リセット</button>
</div>
</body>
</html>

この回答への補足

サンプルありがとうございます！！！！！！！
ページもシンプルで、コードのキレイさに感動しました！！！


>>送信先では一致するid等でレコードをupdateすれば良いと思います。
受取った数値をカウント用のDBにupdateしてデータ化し、
再度ページを開いたらその数字が初期値となる
という解釈で宜しいでしょうか。
（すみません、PHPも独学なもので変な質問で申し訳ないです）

補足日時：2013/06/11 14:10
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！！

通報する
お礼日時：2013/06/11 15:13

No.5

  • 回答者： LancerVII
  • 回答日時：

>ページロードと同時にupdateすれば良いのですね、


>面白いです、いろいろチャレンジしてみます！！
ページロードと同時に行うのはselectです。
selectした件数を表示し、「好き」のクリックでupdateします。

>最後に1点だけ、質問時に記載忘れがありまして、
>ご存知でしたらお教えいただきたいのですが、
>二重クリックを禁止することは不可能でしょうか??
>（何度も申し訳ございません。無視していただいても構いません。）
1人1項目に対して1クリックのみということでしょうか？
技術的には可能ですが、ユーザ管理が出来てないとほぼ無理です。
ログイン認証等行っていれば、カウントデータテーブルのレコードにそのユーザの情報があったらカウントしない（または「好き」のリンクを外す等の)制御ができますが、ログインしていないのであれば”誰が”クリックしたかわかりません。

クッキーを利用してという方法もありますが、クッキーを削除されちゃえばまたクリックできます。
ではIPアドレスでやろうと思ってもIPアドレスは変わるものと考えますので完全な制御は無理です。
    • good
    • 1
    • 件
通報する
この回答へのお礼

クリック時のPOSTでupdateですね、ありがとうございます！！

二重クリックについても、大変丁寧にご回答いただきありがとうございました！！
ログイン機能なども使っておりましたが使わずにできないかと色々調べておりました。
諦めきれずに探すばかりで、自分の中で「無理」という区切りがどうももてなくて・・・

本当に感謝しております、ありがとうございました！！

通報する
お礼日時：2013/06/11 15:13

No.4

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



>受取った数値をカウント用のDBにupdateしてデータ化し、
>再度ページを開いたらその数字が初期値となる
>という解釈で宜しいでしょうか。

そうですね。ページを開いた時に、データを取得しておきます。
その件数を初期値として画面に表示します。

それか、初回のロードもJavaScriptを利用して取得するのも手です。
先のソースですと「好き」をクリック時にidを送信してそのidのカウントをアップして返しています。
それをページロード後に全てのIDの値を取得して動的に設定します。

方法はいろいろありますので、チャレンジしてみてください。

この回答への補足

お忙しい中ご回答感謝しております。

わかりました！！
ページロードと同時にupdateすれば良いのですね、
面白いです、いろいろチャレンジしてみます！！


最後に1点だけ、質問時に記載忘れがありまして、
ご存知でしたらお教えいただきたいのですが、
二重クリックを禁止することは不可能でしょうか??
（何度も申し訳ございません。無視していただいても構いません。）

補足日時：2013/06/11 14:52
通報する
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございます！！

通報する
お礼日時：2013/06/11 15:13

No.2

  • 回答者： 35fa8e3c
  • 回答日時：

見えない（スタイルシートのdisplay:none）インラインフレーム内でphpを呼び出す。


親は遷移しない。
遷移先phpのURL末尾に「?」とパラメータの組み合わせを書くことで、親から子にパラメータを渡すことができる。
http://www.aiueo/index.php?os=windows&score=1
など。
ボタンをクリックしたら
(1)インラインフレームの遷移先ＵＲＬを親のJavaScriptから書き換える。
(2)遷移させる
(3)親の数値もJavaScriptで更新する
(4)php内でURLのパラメータを処理する。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！！

通報する
お礼日時：2013/06/11 15:13

No.1

  • 回答者： yambejp
  • 回答日時：

データの保持はSQLかCSVで対応してください


データへのアクセスはajaxで処理すればよいでしょう
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！！

通報する
お礼日時：2013/06/11 15:13

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報