Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jQuery]Zwiększanie wartości DIV'a po kliknięciu
--Rudy--
post
Post #1





Goście
Witam,

Mam taki kod, oczywiście nie jest on poprawny...

[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  4.   </head>
  5.   <body>
  6.     <div id="plus">1</div>
  7.     <script>
  8.       $(document).ready(function(){
  9.         $('#plus').click(function() {
  10.         var plus = $('#plus');
  11.         var plus++;
  12.         })
  13.       });
  14.     </script>
  15.   </body>
  16. </html>
[HTML] pobierz, plaintext


Czy mógłby mnie ktoś naprowadzić, jak mam to zmodyfikować, aby po kliknięciu na div'a#plus jego wartość zwiększała się o 1?
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #2





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. $(function(){
  2.   $('#plus').click(function(){
  3.     var wartosc = parseInt($(this).html());
  4.     wartosc++;
  5.     $(this).html(wartosc):
  6.   });
  7. });
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
buliq
post
Post #3





Grupa: Zarejestrowani
Postów: 559
Pomógł: 93
Dołączył: 4.03.2008
Skąd: Olsztyn

Ostrzeżenie: (0%)
-----

parseInt($('#plus').html())
Go to the top of the page
+Quote Post
samouk
post
Post #4





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 15.07.2013

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1.  $('#plus').click(function() {
  2.         var plus = $(this).text();
  3.          plus++;
  4.          $(this).text(plus);
  5.         });
[HTML] pobierz, plaintext



demo: http://jsbin.com/osijas/1/

Ten post edytował samouk 15.07.2013, 14:03:28
Go to the top of the page
+Quote Post
mar1aczi
post
Post #5





Grupa: Zarejestrowani
Postów: 731
Pomógł: 141
Dołączył: 9.05.2011
Skąd: śląskie

Ostrzeżenie: (0%)
-----

http://jsfiddle.net/rTEmh/ (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
com
post
Post #6





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

mar1aczi nabijasz posty? bo podałeś w zasadzie to samo co wyżej...
Go to the top of the page
+Quote Post
--Rudy--
post
Post #7





Goście
Witam,

Napisałem taki kod:

[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3. 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  4. 		<style>
  5. 			a {color: #000; text-decoration: none;}
  6. 			.up, .licznik, .down {display: inline-block; margin:10px;}
  7. 		</style>
  8. 	</head>
  9. 	<body>
  10. 		<div><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
  11. 		<div><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
  12. 		<div><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
  13. 		<div><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
  14. 		<div><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
  15. 		<script>
  16. 			$('.up').click(function() {
  17. 				var up = $('.licznik').text();
  18. 				var wynik = up++;
  19. 				$('.licznik').text(up);
  20. 			});
  21.  
  22. 			$('.down').click(function() {
  23. 				var down = $('.licznik').text();
  24. 				var wynik = down--;
  25. 				$('.licznik').text(down);
  26. 			});
  27. 		</script>
  28. 	</body>
  29. </html>
[HTML] pobierz, plaintext


Tylko teraz jak zrobić, żeby po kliknięciu "+" lub "-" zmieniała się wartość jednego diva, a nie wszystkich?
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #8





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

$(this) odnosi się do elementu, na którym wykonywana jest obecna akcja. Ale musisz dodatkowo skorzystać z DOM - closest, find, children, itp.
Go to the top of the page
+Quote Post
com
post
Post #9





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

musisz jakoś je rozróżnić np poprzez dodanie unikalnego id, bo $(this) o którym mówi b4rt3kk i tak wskaże na wszystkie... już prędzej można by próbować tak $('.up', this) ale tak jak powiedziałem musisz jakoś te elementy rozróżniać, bo jeśli wszystkie maja tę sama klasę to logiczne że zmienia się wszędzie (IMG:style_emoticons/default/wink.gif)

Go to the top of the page
+Quote Post
--Rudy--
post
Post #10





Goście
Ok, załóżmy, że nadam każdemu divowi id:

[HTML] pobierz, plaintext 
  1. <div id="ocena1"><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
  2. 		<div id="ocena2"><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
  3. 		<div id="ocena3"><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
  4. 		<div id="ocena4"><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
  5. 		<div id="ocena5"><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
[HTML] pobierz, plaintext


Trzeba by chyba było sprawdzać w jakim divie został kliknięty .up, a następnie w tym divie zmienić wartość div.licznik. Tylko jak to wykonać?
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #11





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

$(this) nie wskaże na wszystkie, tylko na obecnie użyty element, po to jest. Nie zmieniaj nic w HTML, było dobrze. 

[HTML] pobierz, plaintext 
  1. $('.up').click(function() {
  2. 				var up = $(this).closest('div').children('.licznik');
  3. 				var wynik = up.text()++;
  4. 				up.text(wynik);
  5. 			});
[HTML] pobierz, plaintext


Ten post edytował b4rt3kk 16.07.2013, 07:17:15
Go to the top of the page
+Quote Post
--Rudy--
post
Post #12





Goście
Zmieniłem ('div') na (div). Teraz konsola po kliknięciu na + podpowiada, że div nie jest zdefiniowany...
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #13





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Cytat(-Rudy- @ 16.07.2013, 10:00:34 ) *
Zmieniłem ('div') na (div). Teraz konsola po kliknięciu na + podpowiada, że div nie jest zdefiniowany...


Nie zmieniaj 'div' na div, bo w pierwszym przypadku to identyfikator elementu, a w drugim nazwa zmiennej. Ma być 'div'. Pokaż kod.
Go to the top of the page
+Quote Post
--Rudy--
post
Post #14





Goście
http://jsfiddle.net/jB87Y/
Go to the top of the page
+Quote Post
IProSoft
post
Post #15





Grupa: Zarejestrowani
Postów: 479
Pomógł: 97
Dołączył: 6.09.2011
Skąd: php.net :)

Ostrzeżenie: (0%)
-----

http://jsfiddle.net/jB87Y/5/
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #16





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Masz poprawione:

http://jsfiddle.net/jB87Y/7/
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 25.08.2025 - 23:08
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn