web-dev-qa-db-ja.com

jQuery-ボタンがクリックされたときにカウンターの値を増やす

ユーザーがボタンをクリックするとスコアが増加するシステムを作成しています。ボタンがクリックされたときに（ページを更新する必要がないように）jQueryを使用する値を増やしたいカウンターがあります。

これについてどうすればいいですか？

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">

$("#update").click(function() {
$("#counter")++;
}

</script>

#updateはボタン、＃counterはカウンターです。

PHPでは、++は何かの価値を高めます。同等のjQueryとは何ですか？

また、ボタンをクリックすると、ページを更新せずにmysqlデータベースのスコア値も更新するリクエストを送信する必要があります。誰も私がそれをどうするか知っていますか？

どうもありがとう

更新：

以下の方法をいくつか試しましたが、何も機能しないようです！動作させるために何か他のものを変更する必要がありますか？テスト用のページを作成しました：

<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">

var count = 0;

$("#update").click(function() {
    count++;
    $("#counter").html("My current count is: "+count);
}

</script>
<button id="update" type="button">Button</button>
<div id="counter">1</div>
</body>
</htlm>
javascriptjquerybutton
32
Taimur

変数ではないものに対して_++_を使用することはできません。これは最も近いものになります。

_$('#counter').html(function(i, val) { return +val+1 });
_

jQueryの html() メソッドは、要素のHTML値を取得および設定できます。関数を渡すと、既存の値に基づいてHTMLを更新できます。したがって、コードのコンテキストでは：

_$("#update").click(function() {
    $('#counter').html(function(i, val) { return +val+1 });
}
_

デモ：http://jsfiddle.net/marcuswhybrow/zRX2D/2/

ページのカウンターをデータベースのカウンター値と同期することになると、クライアントを信頼しないでください！インクリメントまたはデクリメント信号を送信します10や23などの連続した値ではなく、サーバー側のスクリプトに。

ただし、カウンターのHTMLを変更すると、AJAXリクエストをサーバーに送信できます。

_$("#update").click(function() {
    $('#counter').html(function(i, val) {
        $.ajax({
            url: '/path/to/script/',
            type: 'POST',
            data: {increment: true},
            success: function() { alert('Request has returned') }
        });
        return +val+1;
    });
}
_
54
Marcus Whybrow
$(document).ready(function() {
var count = 0;

  $("#update").click(function() {
    count++;
    $("#counter").html("My current count is: "+count);
  }

});

<div id="counter"></div>
18
jpea

それはただ

var counter = 0;

$("#update").click(function() {
   counter++;
});
10
Vadim

上記の提案のいくつかはグローバル変数を使用しています。これは問題の良い解決策ではありません。カウントは1つの要素に固有であり、jQueryの data 関数を使用して、データのアイテムを要素にバインドできます。

$('#counter').data('count', 0);
$('#update').click(function(){
    $('#counter').html(function(){
        var $this = $(this),
            count = $this.data('count') + 1;

        $this.data('count', count);
        return count;
    });
});

また、これは html のコールバック構文を使用して、コードをより流fluentかつ高速にすることにも注意してください。

8
lonesomeday

以下のサイトにアクセスして試してください。 http://www.counter12.com/

上記のリンクから、私は自分のサイトで用語を受け入れたいと思うデザインを1つ選択し、HTMLページに貼り付けたdivを提供しました。

本当にうまくいきました。

私はJQueryであなたの問題に答えているわけではありませんが、あなたの問題に対する代替ソリューションを提供しています。

1
Anil

JQuery要素に「++」を設定しようとしています！

あなたはjs変数を宣言できます

var counter = 0;

そしてjQueryコードでは：

$("#counter").html(counter++);
0
stecb

これを次の方法で試してみます。 count変数を「onfocus」関数内に配置して、グローバル変数にならないようにしました。アイデアは、tumblrブログの各画像にカウンターを作成することです。

$(document).ready(function() {

  $("#image1").onfocus(function() {

  var count;

    if (count == undefined || count == "" || count == 0) {
    var count = 0;
    }

    count++;
    $("#counter1").html("Image Views: " + count);
  }
});

次に、スクリプトタグの外側と、本文の目的の場所に追加します。

<div id="counter1"></div>
0
Max West