Forum PHP.pl > [jQuery]Zwiększanie wartości DIV'a po kliknięciu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery]Zwiększanie wartości DIV'a po kliknięciu

-Rudy-

15.07.2013, 13:41:47

Witam,

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

[HTML] pobierz, plaintext 
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="plus">1</div>
    <script>
      $(document).ready(function(){
        $('#plus').click(function() {
        var plus = $('#plus');
        var plus++;
        })
      });
    </script>
  </body>
</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?

b4rt3kk

15.07.2013, 13:55:47

[HTML] pobierz, plaintext 
$(function(){
  $('#plus').click(function(){
    var wartosc = parseInt($(this).html());
    wartosc++;
    $(this).html(wartosc):
  });
});
[HTML] pobierz, plaintext

buliq

15.07.2013, 13:59:23

parseInt($('#plus').html())

samouk

15.07.2013, 14:02:30

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

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

mar1aczi

15.07.2013, 14:08:58

http://jsfiddle.net/rTEmh/

com

15.07.2013, 16:13:45

mar1aczi nabijasz posty? bo podałeś w zasadzie to samo co wyżej...

-Rudy-

15.07.2013, 21:16:37

Witam,

Napisałem taki kod:

[HTML] pobierz, plaintext 
<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<style>
			a {color: #000; text-decoration: none;}
			.up, .licznik, .down {display: inline-block; margin:10px;}
		</style>
	</head>
	<body>
		<div><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
		<div><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
		<div><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
		<div><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
		<div><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
		<script>
			$('.up').click(function() {
				var up = $('.licznik').text();
				var wynik = up++;
				$('.licznik').text(up);
			});
 
			$('.down').click(function() {
				var down = $('.licznik').text();
				var wynik = down--;
				$('.licznik').text(down);
			});
		</script>
	</body>
</html>
[HTML] pobierz, plaintext

Tylko teraz jak zrobić, żeby po kliknięciu "+" lub "-" zmieniała się wartość jednego diva, a nie wszystkich?

b4rt3kk

15.07.2013, 22:07:21

$(this) odnosi się do elementu, na którym wykonywana jest obecna akcja. Ale musisz dodatkowo skorzystać z DOM - closest, find, children, itp.

com

15.07.2013, 22:24:26

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

-Rudy-

15.07.2013, 22:35:19

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

[HTML] pobierz, plaintext 
<div id="ocena1"><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
		<div id="ocena2"><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
		<div id="ocena3"><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
		<div id="ocena4"><a href="#plus" class="up">+</a><div class="licznik">0</div><a href="#minus" class="down">-</a></div>
		<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ć?

b4rt3kk

16.07.2013, 07:09:29

$(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 
$('.up').click(function() {
				var up = $(this).closest('div').children('.licznik');
				var wynik = up.text()++;
				up.text(wynik);
			});
[HTML] pobierz, plaintext

-Rudy-

16.07.2013, 09:00:34

Zmieniłem ('div') na (div). Teraz konsola po kliknięciu na + podpowiada, że div nie jest zdefiniowany...

b4rt3kk

16.07.2013, 09:23:12

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.

-Rudy-

16.07.2013, 09:30:24

http://jsfiddle.net/jB87Y/

IProSoft

16.07.2013, 09:40:20

http://jsfiddle.net/jB87Y/5/

b4rt3kk

16.07.2013, 09:46:51

Masz poprawione:

http://jsfiddle.net/jB87Y/7/

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.