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>

Ответы

Ответ 1

Вы не можете использовать ++ для чего-то, что не является переменной, это было бы самым близким, которое вы можете получить:

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

jQuery html() метод может получить и установить значение HTML элемента. Если передана функция, она может обновлять HTML на основе существующего значения. Итак, в контексте вашего кода:

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

DEMO: http://jsfiddle.net/marcuswhybrow/zRX2D/2/

Когда дело доходит до синхронизации вашего счетчика на странице со значением счетчика в вашей базе данных, никогда не доверяйте клиенту!. Вы посылаете сигнал с шагом или декретом на серверную сторону script, а не непрерывное значение, такое как 10 или 23.

Однако вы можете отправить запрос AJAX на сервер при изменении HTML-кода вашего счетчика:

$("#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;
    });
}

Ответ 2

$(document).ready(function() {
var count = 0;

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

});

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

Ответ 3

Это просто

var counter = 0;

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

Ответ 4

В нескольких приведенных выше предложениях используются глобальные переменные. Это не является хорошим решением проблемы. Счетчик относится к одному элементу, и вы можете использовать функцию 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.

Ответ 5

Перейдите на сайт ниже и попробуйте. http://www.counter12.com/

Из приведенной выше ссылки я выбрал один дизайн, который мне нравился на моем сайте, и он предоставил мне div, который я вставил на моей странице html.

Он отлично справился.

Я не отвечаю на вашу проблему в JQuery, но предоставляю альтернативное решение для вашей проблемы.

Ответ 6

Вы пытаетесь установить "++" в элементе jQuery!

Вы можете объявить переменную js

var counter = 0;

и в коде jQuery выполните:

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

Ответ 7

Я собираюсь попробовать это следующим образом. Я поместил переменную 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);
  }
});

Затем, за пределами тегов script и в нужном месте в теле я добавлю:

<div id="counter1"></div>