jQuery - Zwiększ wartość licznika po kliknięciu przycisku

Tworzę system, w którym użytkownik klika przycisk, a jego wynik wzrasta. Istnieje licznik, który chciałbym zwiększyć wartość przy użyciu jQuery (aby strona nie musiała się odświeżać) po kliknięciu przycisku.jQuery - Zwiększ wartość licznika po kliknięciu przycisku

Co mam zrobić?

<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>

#aktualizacja jest przyciskiem, #licznik jest licznikiem.

W php, ++ zwiększa wartość czegoś. Co to jest odpowiednik jQuery?

Ponadto, po kliknięciu przycisku, musi wysłać żądanie, które aktualizuje wartość wyniku w bazie danych mysql, bez odświeżania strony. Czy ktoś wie, jak bym to zrobił?

Thanks a lot

UPDATE:

Próbowałem kilka z poniższych metod, ale nic nie wydaje się do pracy! Czy muszę zmienić cokolwiek innego, aby działał? Utworzyłem stronę testową dla niego:

<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>

Źródło

2011-01-15 Taimur

* Licznik # jest licznikiem *: Czy jest to element zawierający liczbę lub co? –

yeah, #counter to div z numerem wewnątrz – Taimur

@Taimur Twój kod jest nieprawidłowy. Zakończ funkcję klikania za pomocą '});' a nie tylko '}'. ** DEMO: ** http://jsfiddle.net/marcuswhybrow/Bwdfw/ –

Nie można używać ++ na coś, co nie jest zmienna, to byłoby najbliżej można dostać:

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

jQuery html() metoda może pobrać i ustawić wartość HTML elementu. Po przekazaniu funkcji może zaktualizować HTML na podstawie istniejącej wartości. Tak więc w kontekście kodzie:

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

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

Jeśli chodzi o synchronizację swój licznik na stronie, z wartością licznika w swojej bazie danych, nigdy ufać klienta! Wysyłasz albo sygnał przyrostu, albo dekrementacji do skryptu po stronie serwera, zamiast ciągłej wartości, takiej jak 10 lub 23.

Możesz jednak wysłać żądanie AJAX do serwera po zmianie kodu HTML licznika:

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

Źródło

2011-01-15 18:24:48

To działa dobrze w rzeczy demo, ale z jakiegoś powodu nie działa na mojej stronie. W rzeczywistości żadna z odpowiedzi nie jest! Czy jest coś, czego mi brakuje? – Taimur

Dzięki za odpowiedź, w sprawie AJAX, w jaki sposób wie, czy funkcja zakończyła się sukcesem? Co robi (i, val)? Dzięki – Taimur

@Marcus Zastanów się '+ val + 1' zamiast' val * 1 + 1' –

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

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

}); 

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

Źródło

2011-01-15 18:24:29 jpea

ty potrzebne do dodania funkcji gotowości dokumentu przed wystrzeleniem jakiegokolwiek kodu jQuery (edytowanego powyżej) – jpea

To tylko

var counter = 0; 

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

Źródło

2011-01-15 18:24:55 Vadim

próbujesz ustawić "++" na elemencie jQuery!

można było zadeklarować zmienną js

var counter = 0;

aw kodu jQuery zrobić:

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

Źródło

2011-01-15 18:25:21 stecb

Powinieneś utworzyć zmienną globalną? Naprawdę? –

"TY POWINIEN";) "nie" MUSISZ ".. byłoby lepiej" można ".. c'mon istnieje kilka sposobów, aby to zrobić, moje to tylko sugestia! – stecb

Tak, "możesz" jest tutaj właściwą formą. "Powinieneś" to zalecenia. I nikt nie powinien zalecać tworzenia zmiennych globalnych, zalecenie jest tu odwrotne: należy unikać tworzenia zmiennych globalnych. –

Kilka sugestii powyżej używać zmiennych globalnych. To nie jest dobre rozwiązanie problemu.Hrabia jest specyficzny dla jednego elementu, można użyć data funkcję jQuery, aby związać element danych do elementu:

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

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

Należy również zauważyć, że ta wykorzystuje składnię wywołania zwrotnego z html aby kod bardziej płynnie i szybko .

Źródło

2011-01-15 18:31:44 lonesomeday

Nie jest prawdą, jeśli istnieje więcej niż jeden sposób zmiany wartości licznika – jcuenod

@ j3frea Następnie enkapsuluj kod w wtyczce. Szczerze mówiąc, nie jest to trudne, a zaśmiecanie kodu zmiennymi globalnymi jest bardzo złym pomysłem. – lonesomeday

Nikt nie używa zmiennych globalnych, to tylko przykłady. Kontekst nie jest podany w żadnej odpowiedzi. –

Spróbuję tego w następujący sposób. Ustawiłem zmienną count w funkcji "onfocus", aby nie stała się ona zmienną globalną. Chodzi o to, aby utworzyć licznik dla każdego obrazu na blogu tumblr.

$(document).ready(function() { 

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

    var count; 

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

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

Następnie poza znaczniki skryptów w wybranym miejscu w organizmie dodam:

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

Źródło

2013-06-25 21:44:14

Idź na poniższej stronie i tryout. http://www.counter12.com/

Z powyższego linku wybrałem jeden projekt, który chciałem mieć na stronie akceptowanych terminów i dało mi div, który wkleiłem na mojej stronie html.

To zadziwiająco zadziałało.

Nie odpowiadam na Twój problem w JQuery, ale dajesz alternatywne rozwiązanie problemu.

Źródło

2015-07-30 15:13:20 Anil

jQuery - Zwiększ wartość licznika po kliknięciu przycisku

Odpowiedz

Powiązane problemy