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

javascript jquery button

189181 просмотра

7 ответа

1216 Репутация автора

Я создаю систему, в которой пользователь нажимает кнопку, и его оценка увеличивается. Есть счетчик, который я хотел бы увеличить при использовании 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>
Автор: Taimur Источник Размещён: 15.01.2011 06:22

Ответы (7)


18 плюса

2744 Репутация автора

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

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

});

<div id="counter"></div>
Автор: jpea Размещён: 15.01.2011 06:24

56 плюса

14828 Репутация автора

Решение

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

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

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

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

ДЕМО: 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;
    });
}
Автор: Marcus Whybrow Размещён: 15.01.2011 06:24

10 плюса

16793 Репутация автора

Это просто

var counter = 0;

$("#update").click(function() {
   counter++;
});
Автор: Vadim Размещён: 15.01.2011 06:24

0 плюса

12134 Репутация автора

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

Вы могли бы объявить переменную JS

var counter = 0;

и в коде JQuery сделать:

$("#counter").html(counter++);
Автор: stecb Размещён: 15.01.2011 06:25

8 плюса

194765 Репутация автора

Некоторые из предложенных выше предложений используют глобальные переменные. Это не хорошее решение проблемы. Количество зависит от одного элемента, и вы можете использовать dataфункцию jQuery для привязки элемента данных к элементу:

$('#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чтобы сделать код более быстрым и быстрым.

Автор: lonesomeday Размещён: 15.01.2011 06:31

0 плюса

735 Репутация автора

Я собираюсь попробовать это следующим образом. Я поместил переменную 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>
Автор: Max West Размещён: 25.06.2013 09:44

1 плюс

322 Репутация автора

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

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

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

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

Автор: Anil Размещён: 30.07.2015 03:13
Вопросы из категории :
32x32