Wytłumaczenie gdzie jest błąd w pętli

0

Siemka, ktoś mi wytłumaczy gdzie mam błąd w tej pętli?

for (var i = 1; i < 8; i++) {
                $("#auto"+i).change(function () {
                var x = $(this).find("option:selected").val();
                $("div#kwota"+i).text(x);
            })

Chciałem aby powyższy kod wykonywał mi takie oto zadanie. Po wyborze z tagu select id="auto" określonej opcji wyświetlał się w moim div id="kwota" przypisaną wartość value z tagu opcion. Oczywiście mam kilka id auto i kwota które różnią się tylko liczbą. Kod działa bez pętli

0

Brak zamykajacego nawiasu '}' ?

0

Dzięki, ale i z zamykającym nawiasem nie działa ;/

0

po co pętla for skoro w jQuery mamy $.each.

0

Możesz coś więcej napisać? Co dokładnie się dzieje, są jakieś błędy w konsoli?

0

Dzięki, a mógłbym pomóc w przerobieniu tej pętli na $.each?

1

@bagsiur:
Pętla for zapewne jest szybsza niż each. Nie każdy tego typu problem też tak można rozwiązać, a to ważna rzecz jest, z czym @Krzysiekk89 ma problem.

@Krzysiekk89:
Tworzysz funkcję w pętli for (tę obsługującą zdarzenie, anonimową). W tej funkcji próbujesz używać iteratora (i). Normalne IDE (np. PhpStorm) wskaże Ci ten błąd ( patrz: http://i.imgur.com/sOcsKlu.png ). Nie mam pojęcia jak to dokładniej opisać, ale żeby się tego pozbyć musisz utworzyć scope (po polsku: zakres, czasem bodajże nazywany "kontekstem"), w którym i w Twojej funkcji stanie się lokalne i nie będzie modyfikowane przez pętlę.
Wygląda to tak:

for (var i = 1; i < 8; i++) {
    (function(moje_i){
        // moje_i jest tutaj lokalne
        $("#auto"+moje_i).change(function () {
            var x = $(this).find("option:selected").val();
            $("div#kwota"+moje_i).text(x);
        });
    })(i); // tworzysz anonimową funkcję, którą natychmiast wywołujesz, przekazując jej jako parametr `i` (w funkcji nazywa się to `moje_i`)
}

Inną opcją byłoby coś podobnego, co @bagsiur podpowiada, czyli:

$("#auto1, #auto2, #auto3, #auto4, #auto5, #auto6, #auto7, #auto8").change(function () {
  var i = $(this).attr('id').replace(/^auto/, ''); // `i` to teraz ten numerek
});

Selektory mogłyby być tu różne. Nie wiem jak wygląda Twój HTML, ale być może wystarczyłoby coś w stylu: #jakasForma select, albo #jakasForma select[id^=auto] (id zaczyna się od auto). Możliwe też, że Twoje elementy nie potrzebują id, i mógłbyś zastosować klasy i dodatkowy atrybut "zliczający", np. <select class="auto" data-numer="1"> - wtedy wybrałbyś .auto i pobierałbyś ten atrybut (zamiast replace pokazanego wyżej).

I jeszcze jedno. Jeżeli Twoje #auto1 to jest <select> (tego nie wiem) to możesz użyć po prostu:

$(this).val();
// zamiast
$(this).find("option:selected").val();
0

wrzucam kod. Może ktoś jeszcze bardziej rozjaśni mi ten problem. ;/

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-1.10.2.js"></script>

</head>
<body>

        <table>
            <tr>
        <td><div id="kwotaPaliwa1">0</div></td>
            <td>
            <select id="auto1">
                <option value="0">Wybierz Samochód</option>
                <option value="10">Seat </option>
                <option value="20">Passat</option>
                <option value="30">Audi</option>
            </select>
        </td>
                </tr>
            <tr>
                <td><div id="kwotaPaliwa2">0</div></td>
               
                <td>
                    <select id="auto2">
                        <option value="0">Wybierz Samochód</option>
                        <option value="10">Seat</option>
                        <option value="20">Passat</option>
                        <option value="30">Audi</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><div id="kwotaPaliwa3">0</div></td>
              
                <td>
                    <select id="auto3">
                        <option value="0">Wybierz Samochód</option>
                        <option value="10">Seat</option>
                        <option value="20">Passat</option>
                        <option value="30">Audi</option>
                    </select>
                </td>
            </tr>
        </table>

    <script>

    var fpaliwa = $("#auto1").change(function () {
        var x = $(this).val();
        $("div#kwotaPaliwa1").text(x);
    })
    </script>


</body>
</html>
0

Dzięki ale już sobie poradziłem przy pomocy @dzek69. Jesteś wielki Dzięki
A oto rozwiązanie dla innych:

for (var i = 1; i < 8; i++) {
            (function (moje_i) {
                var fpaliwa = $("#auto" + moje_i).change(function () {
                    var x = $(this).val();
                    $("div#kwotaPaliwa" + moje_i).text(x);
                });
            })(i);
        }

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