質問失礼いたします。
前提としまして、当方JAVAスクリプトを利用したことがございません。
何卒ご了承下さい。
下記のような表があります。
+──────+───+
│ウィンドウズ │好き(9)│
+──────+───+
│アップル │好き(5)│
+──────+───+
│アンドロイド │好き(1)│
+──────+───+
「好き」というテキストをクリックすると()内の数字が増えるという仕組みを作りたいと思っています。
合わせて、下記のようなことが条件となります。
・表のデータはデータベースよりPHPを利用して表示します
・クリックしてもページは移動したくありません
・上記に合わせて、数字もリアルタイムで増やしたいです
画面を切り替えずに数字を増やすという点ではjQueryが良いのかとこちらに質問させていただきました。
また、もし他に良い方法などありましたら、jQuery以外でも良いのでお教え下さい。
宜しくお願い致します。
No.3ベストアンサー
- 回答日時:
こんにちは。
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も独学なもので変な質問で申し訳ないです)
No.5
- 回答日時:
>ページロードと同時にupdateすれば良いのですね、
>面白いです、いろいろチャレンジしてみます!!
ページロードと同時に行うのはselectです。
selectした件数を表示し、「好き」のクリックでupdateします。
>最後に1点だけ、質問時に記載忘れがありまして、
>ご存知でしたらお教えいただきたいのですが、
>二重クリックを禁止することは不可能でしょうか??
>(何度も申し訳ございません。無視していただいても構いません。)
1人1項目に対して1クリックのみということでしょうか?
技術的には可能ですが、ユーザ管理が出来てないとほぼ無理です。
ログイン認証等行っていれば、カウントデータテーブルのレコードにそのユーザの情報があったらカウントしない(または「好き」のリンクを外す等の)制御ができますが、ログインしていないのであれば”誰が”クリックしたかわかりません。
クッキーを利用してという方法もありますが、クッキーを削除されちゃえばまたクリックできます。
ではIPアドレスでやろうと思ってもIPアドレスは変わるものと考えますので完全な制御は無理です。
クリック時のPOSTでupdateですね、ありがとうございます!!
二重クリックについても、大変丁寧にご回答いただきありがとうございました!!
ログイン機能なども使っておりましたが使わずにできないかと色々調べておりました。
諦めきれずに探すばかりで、自分の中で「無理」という区切りがどうももてなくて・・・
本当に感謝しております、ありがとうございました!!
No.4
- 回答日時:
こんにちは。
>受取った数値をカウント用のDBにupdateしてデータ化し、
>再度ページを開いたらその数字が初期値となる
>という解釈で宜しいでしょうか。
そうですね。ページを開いた時に、データを取得しておきます。
その件数を初期値として画面に表示します。
それか、初回のロードもJavaScriptを利用して取得するのも手です。
先のソースですと「好き」をクリック時にidを送信してそのidのカウントをアップして返しています。
それをページロード後に全てのIDの値を取得して動的に設定します。
方法はいろいろありますので、チャレンジしてみてください。
この回答への補足
お忙しい中ご回答感謝しております。
わかりました!!
ページロードと同時にupdateすれば良いのですね、
面白いです、いろいろチャレンジしてみます!!
最後に1点だけ、質問時に記載忘れがありまして、
ご存知でしたらお教えいただきたいのですが、
二重クリックを禁止することは不可能でしょうか??
(何度も申し訳ございません。無視していただいても構いません。)
No.2
- 回答日時:
見えない(スタイルシートのdisplay:none)インラインフレーム内でphpを呼び出す。
親は遷移しない。
遷移先phpのURL末尾に「?」とパラメータの組み合わせを書くことで、親から子にパラメータを渡すことができる。
http://www.aiueo/index.php?os=windows&score=1
など。
ボタンをクリックしたら
(1)インラインフレームの遷移先URLを親のJavaScriptから書き換える。
(2)遷移させる
(3)親の数値もJavaScriptで更新する
(4)php内でURLのパラメータを処理する。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) 【エクセル】COUNTIFの検索条件が可変する数字の場合の数式 1 2022/09/27 15:34
- システム CSVファイルのマッピング処理の省力化 1 2022/11/24 00:01
- FC2ブログ テキスト版からURLも表示できるように設定できないのでしょうか。 ブログにURLを載せようとしたら文 2 2023/02/12 11:20
- Excel(エクセル) Excelで数式をそのままコピーしたい どうすればいいですか? 4 2022/09/16 02:16
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/06/15 14:11
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- バックアップ Windows11パソコンのデータを数クリックで完全に引っ越しするにはどうすれば良いでしょうか? 5 2022/10/11 14:08
- Excel(エクセル) 見えているセルの数字だけの合計を計算させたい 4 2022/09/11 17:23
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptで画像をテーブルに...
-
javascriptでスロットマシン
-
return trueとreturn falseの用...
-
プルダウン選択を変更すると、...
-
slickのレスポンシブ > center...
-
FormのonsubmitでJavaスクリプ...
-
onchangeイベントを強制的に発...
-
submitがおされた同時に JavaSc...
-
select要素のvalueを配列で取得...
-
Selectボックスの幅を自動で広...
-
HTMLファイル同士での値渡し
-
ラジオボタンの値でリンク先を...
-
ラジオボタンとプルダウンを連...
-
Selectの中身をfor文で入れる
-
JQuery selectが反映されない
-
onClickとsubmitの処理順序
-
確認ページからフォームページ...
-
javascriptで入力禁止文字をチ...
-
プルダウンで選択すると、DBの...
-
dijit.form.ComboBoxについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
テーブルの行数を可変長にした...
-
画面表示とともに、テーブルの...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
JQueryでテーブルの行を追加し...
-
javascriptで画像をテーブルに...
-
クリックごとに文字色が交互に...
-
カレンダーに印を付けたい
-
任意に文字数指定のできる原稿...
-
idの振り直しについて
-
tbody要素のinnerHTMLが書き換...
-
複数画像のロールオーバー
-
指定のテキストをクリックする...
-
マウスが重なったら画像の上に...
-
jQueryでの親の親の隣の子供の...
-
JavaScript 保守性の高めたい 2
-
Javascriptでの開閉リストの質問
おすすめ情報