4programmers.net 4p Forum Webmastering Zmiana ilości PLUS i MINUS z kontrolą bilansu.

Zmiana ilości PLUS i MINUS z kontrolą bilansu.

Zmiana ilości PLUS i MINUS z kontrolą bilansu.
  • Rejestracja: dni
  • Ostatnio: dni
0

Szukam rozwiązania problemu. Jestem kiepski w JS więc szukam pomocy.

Mam tabele:

Nazwa Ilość
Typ 1 20
Typ 2 40
Typ 3 60

i teraz chciałbym dodać możliwość zmiany ILOŚĆ za pomocą + i -.

Nazwa Ilość
Typ 1 +20-
Typ 2 +40-
Typ 3 +60-

jednak z możliwością kontroli bilansu (jesli wezmiemy z jednego to mozemy dodać to samo do innego) i jeśli bilans jest inny niż 0 to pojawia się dodatkowy wiersz z bilansem.

Nazwa Ilość
Pozostało 30
---------------- ----------------
Typ 1 +20-
Typ 2 +10-
Typ 3 +60-

No i teraz wiem jak zmienić ilości w danym wierszu, jednak nie wiem jak kontrolować bilans i wyświetlenie wiersza z bilansem.

Udostępnij
Komentuj
dzek69
dzek69
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Rzeszów
0

Pokaż co masz zrobione

Udostępnij
Komentuj
  • Rejestracja: dni
  • Ostatnio: dni
0

Hej!

Troszkę wczoraj "pogrzebałem" i trochę zmieniłem ale sens ten sam:

Kopiuj
<div><a href="#plus" class="up">+</a>
    <div class="licznik">50</div><a href="#minus" class="down">-</a>
</div>
<div><a href="#plus" class="up">+</a>
    <div class="licznik">50</div><a href="#minus" class="down">-</a>
</div>
<div><a href="#plus" class="up">+</a>
    <div class="licznik">50</div><a href="#minus" class="down">-</a>
</div>
<div><a href="#plus" class="up">+</a>
    <div class="licznik">50</div><a href="#minus" class="down">-</a>
</div>
<div><a href="#plus" class="up">+</a>
    <div class="licznik">50</div><a href="#minus" class="down">-</a>
</div>BILANS:
<div class="bilans">0</div>

teraz JS

Kopiuj
$('.up').click(function () {
    var wartosc = $(this).closest('div').children('.licznik');
    var bilans = $('.bilans').text();

    if (bilans > 0) {
        up = parseInt(wartosc.html()) + 10;
        bilans = parseInt(bilans) - 10;
        wartosc.html(up);
    }

    $('.bilans').text(bilans);
});

$('.down').click(function () {
    var wartosc = $(this).closest('div').children('.licznik');
    var bilans = $('.bilans').text();

    if (wartosc.html() > 0) {
        up = parseInt(wartosc.html()) - 10;
        bilans = parseInt(bilans) + 10;
    }
    wartosc.html(up);
    $('.bilans').text(bilans);
});

no i wszystko działa na http://jsfiddle.net/ jednak nie działa u mnie na stronie.

Dodałem jQuery 1.8.3.

I teraz nie mam pojęcia dlaczego nie działa.

Udostępnij
Komentuj
dzek69
dzek69
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Rzeszów
0

zajrzyj w konsolę - na pewno tam masz jakiś błąd.

albo zalinkuj do tej Twojej strony, to zbadamy problem

Udostępnij
Komentuj
  • Rejestracja: dni
  • Ostatnio: dni
0

TEST TUTAJ

http://partnersclub.pl/temp.html

Udostępnij
Komentuj
dzek69
dzek69
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Rzeszów
0
Kopiuj
Uncaught exception: TypeError: '$' is not a function
Error thrown at line 101, column 0 in http://partnersclub.pl/temp.html:
    $('.up').click(function () {


// oraz to:
[cycle] terminating; too few slides: 0                   jquery.cycle.all.min.js:24
[cycle] terminating; too few slides: 0                   jquery.cycle.all.min.js:24

zaglądaj w konsolę!

poczytaj o document ready w jQuery

Udostępnij
Komentuj
  • Rejestracja: dni
  • Ostatnio: dni
0

Niestety zaglądam w konsolę ... jednak nie rozumiem znajdujących się tam błędów.
Wpisuję na StackOverflow itp. ale nadal jestem w czarnej du...

Najbardziej mnie zastanawia dlaczego skrypt działa na http://jsfiddle.net/ bez problemów...

Co do document ready to nie bardzo wiem jak to ugryźć konkretnie do tego skryptu.

Kopiuj
$(document).ready(function() {
 
    //tutaj mój skrypt ???
 
})

Czy wywołuję te funkcje w złym miejscu na stronie ??

Czy powinienem wstawić to w HEAD czy w BODY ???

Nie wiem!

Udostępnij
Komentuj
dzek69
dzek69
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Rzeszów
0

otocz ten Twój kod tym, co napisałeś w poście wyżej i będzie działać.

ALE !!!!!!!!!!!!!!!!!!!!!!
pierwsze poczytaj DLACZEGO to tak jest. Nie przeklejaj bezmyślnie przykładów, bo nigdy nie nauczysz się programować.

jsfiddle domyślnie otacza Twój kod czymś takim, więc działa.

Udostępnij
Komentuj
  • Rejestracja: dni
  • Ostatnio: dni
0
dzek69 napisał(a):

otocz ten Twój kod tym, co napisałeś w poście wyżej i będzie działać.

Kopiuj
<script type="text/javascript">
$(document).ready(function() {
 
	$('.up').click(function () {
	    var wartosc = $('.mini12').closest('div').children('.licznik');
	    var bilans = $('.bilans').text();

	    if (bilans > 0) {
		up = parseInt(wartosc.html()) + 10;
		bilans = parseInt(bilans) - 10;
		wartosc.html(up);
	    }

	    $('.bilans').text(bilans);
	});

	$('.down').click(function () {
	    var wartosc = $('.mini12').closest('div').children('.licznik');
	    var bilans = $('.bilans').text();

	    if (wartosc.html() > 0) {
		up = parseInt(wartosc.html()) - 10;
		bilans = parseInt(bilans) + 10;
	    }
	    wartosc.html(up);
	    $('.bilans').text(bilans);
	});

});
</script>

no i nie działa!

Udostępnij
Komentuj
dzek69
dzek69
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Rzeszów
0

masz jakieś dziwne jQuery które ustawia tryb noConflict, powodujący, że funkcje jQuery nie są dostępne znakiem dolara, tylko trzeba pisać jQuery(selektor).funkcja()

zamień to na normalne jquery

Udostępnij
Komentuj
  • Rejestracja: dni
  • Ostatnio: dni
0

masz jakieś dziwne jQuery które ustawia tryb noConflict, powodujący, że funkcje jQuery nie są dostępne znakiem dolara, tylko trzeba pisać jQuery(selektor).funkcja()
zamień to na normalne jquery

Nie wiem jak zamienić na inne jQuery, ale zamieniłem wszystkie "$" na "jQuery" i działa prawie ....

Widzę, że ma problem z .closest().children(), ponieważ dodaje i odejmuje ale wszystkie wartosci na raz.

Myslisz, że zamiana jQuery rozwiąże ten problem też ?

Udostępnij
Komentuj
dzek69
dzek69
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Rzeszów
0

po prostu ściągnąć inne? lol..

nie, nie rozwiąże, bo kod jest zły.

Kopiuj
var wartosc = $(this).closest('div').children('.licznik');

nawet nie próbuję tłumaczyć dlaczego, bo ty nie próbujesz nic zrozumieć z kodu to szkoda mojego czasu

Udostępnij
Komentuj
  • Rejestracja: dni
  • Ostatnio: dni
0

Już skrypt działa. Drobne poprawki i zadziałał. Problem był z jQuery i kompatybilnością z innymi dodatkami na stronie.

Ale teraz mi wyszedł drugi problem i ... może ktoś ma pomysł.

Muszę teraz te dane zapisać do bazy, ale tylko wtedy gdy bilans równy 0.

Wyciągnięcie danych jeśli będzie pole INPUT spoko. Gorzej w tym przypadku...

Nie nawidzę javascript!!!

Chyba czas na porządną naukę.

Udostępnij
Komentuj
dzek69
dzek69
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Rzeszów
1

po prostu zrób sobie hidden inputy i oprócz wpisywania danych w elementy html - ustawiaj value w tych inputach.

pamiętaj też, zeby sprawdzić w php czy faktycznie suma się zgadza - dane od klienta można sfałszować

Udostępnij
Komentuj
  • Rejestracja: dni
  • Ostatnio: dni
0

Trochę pozmieniałem kod:

Kopiuj
<div><a href="#plus" class="up">+</a> <div class="licznik">50</div>
    <input type="text" name="ban[]" class="licznik" value="50"><a href="#minus" class="down">-</a>
</div>
    
<div><a href="#plus" class="up">+</a> <div class="licznik">50</div>
    <input type="text" name="ban[]" class="licznik" value="50"><a href="#minus" class="down">-</a>
</div>
    
<div><a href="#plus" class="up">+</a> <div class="licznik">50</div>
    <input type="text" name="ban[]" class="licznik" value="50"><a href="#minus" class="down">-</a>
</div>
    
<div><a href="#plus" class="up">+</a>
     <div class="licznik">50</div>
    <input type="text" name="ban[]" class="licznik" value="50"><a href="#minus" class="down">-</a>
</div>
<div><a href="#plus" class="up">+</a> <div class="licznik">50</div>
    <input type="text" name="ban[]" class="licznik" value="50"><a href="#minus" class="down">-</a>
</div>BILANS:
     <div class="bilans">0</div><input type="text" name="bilans" class="licznik" value="0">
Kopiuj
$('.up').click(function () {
    var wartosc = $(this).closest('div').children('.licznik');
    var bilans = $('.bilans').text();

    if (bilans > 0) {
        up = parseInt(wartosc.html()) + 10;
        bilans = parseInt(bilans) - 10;
        wartosc.html(up);
**         $(this).closest('input[name*="ban[]"]').val(up);**
    }

    $('.bilans').text(bilans);
    $('input[name$="bilans"]').val(bilans);
});

$('.down').click(function () {
    var wartosc = $(this).closest('div').children('.licznik');
    var bilans = $('.bilans').text();

    if (wartosc.html() > 0) {
        up = parseInt(wartosc.html()) - 10;
        bilans = parseInt(bilans) + 10;
    }
    wartosc.html(up);
**    $(this).closest('input[name*="ban[]"]').val(up);**
    $('.bilans').text(bilans);
    $('input[name$="bilans"]').val(bilans);
});

Oczywiście użyłem na razie INPUT-a TEXT zamiast HIDDEN, żeby zobaczyć czy działa i nie działa.

Wiem, że problem jest w linijkach oznaczonych ** ** ale nie wiem co zmienić.

Udostępnij
Komentuj
dzek69
dzek69
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Rzeszów
1

A może być spróbował ZROZUMIEĆ swój kod chociaż raz? Naprawdę.
Ja Ci mogę dać znowu rozwiązanie, ale za 3 dni napiszesz kolejnego posta.

Odpal sobie w dokumentacji jQuery następujące funkcje, poczytaj, korzystaj z narzędzi deweloperskich do wyświetlania ładnego drzewa DOM (bo Twój kod jest sformatowany byle jak i nie da się w nim odnaleźć), pobaw się jak działa każda funkcja:
#closest
#find
#children (i jaka jest różnica od find)
#parent (i jaka jest różnica od closest)
#siblings
#next (i nextAll)
#prev (i prevAll)

Udostępnij
Komentuj
  • Rejestracja: dni
  • Ostatnio: dni
0

Dziękuję, wszystko działa!!!!!!
Przepraszam za kłopot!

Biorę się za naukę!

Udostępnij
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto