jQuery - увеличивает значение счетчика при нажатии кнопки - PullRequest
Новая
       10

jQuery - увеличивает значение счетчика при нажатии кнопки

32 голосов
/ 15 января 2011

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

# обновление - кнопка, #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>

Ответы [ 7 ]

54 голосов
/ 15 января 2011

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

$('#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/

Когда дело доходит до синхронизации вашего счетчика на странице со значением счетчика в вашей базе данных, никогда не доверяет клиенту! Вы посылаете сигнал увеличения или уменьшения в свой сценарий на стороне сервера, а не непрерывное значение, например 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;
    });
}
17 голосов
/ 15 января 2011 
$(document).ready(function() {
var count = 0;

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

});

<div id="counter"></div>
10 голосов
/ 15 января 2011

Это просто 

var counter = 0;

$("#update").click(function() {
   counter++;
});
8 голосов
/ 15 января 2011

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

1 голос
/ 30 июля 2015

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

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

Это действительно сработало.

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

0 голосов
/ 26 июня 2013

Я собираюсь попробовать это следующим образом. Я поместил переменную 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 голосов
/ 15 января 2011

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

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

var counter = 0;

, а в коде jQuery сделать: 

$("#counter").html(counter++);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...