JS zmiana div góra/dół Opcje

[topcio]

Witajcie

Proszę o pomoc, możecie mi powiedzieć co mam nie tak w poniższym kodzie.

Przy każdym divie pokazują się strzałki.
Jak kliknę raz, przeskakuje div w dół, jak kliknę drugi raz tak jakby skrypt leciał dwa razy.... i tak potem 3,4,5,6,

[PHP] pobierz, plaintext 
            $(document).ready(function(){
                var petID='';
                var itemlist = $('#familiar_items');
                var len=$(itemlist).children().length; 
                $("#familiar_items div").click(function(){
                    selected= $(this).index();
                    petID= $(this).attr("id");
                    $("#familiar_items div").css('border-color', 'lightskyblue');
                    $(this).css('border-color', 'lightgreen');
                    console.log($(this).index());
 
                $("#up_" + petID).click(function(e){
                    e.preventDefault();
                    if(selected > 0){
                        jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected)));
                        // selected=selected-1;
                        selected= $("#familiar_items").index();
                        console.log(itemlist.children());
                    }
                    e.preventDefault();
                });
                $("#down_" + petID).click(function(e){
                    e.preventDefault();
                    if(selected < len) {
                        jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected)));
                        // selected=selected+1;
                        selected= $("#familiar_items").index();
                        console.log(itemlist.children());
                    }
                });
            });
            });
[PHP] pobierz, plaintext 

Po stronie PHP kod wygląda tak

[PHP] pobierz, plaintext 
            foreach ($acc_settings_file_json->$familiarData as $item) {
                if ($item->petUnlocked == true) {
                    $pet_Id = $item->petId;
                    echo "<div class=\"familiars\" id=\"" . $pet_Id . "\">";
                        echo "<div class=\"familiarsdiv2\">";
                        // obrazek
                        echo "</div>";
                        echo "<div class=\"familiarsdiv3\">";
                            echo "<a id=\"up_" . $pet_Id . "\"><i class=\"fas fa-arrow-up\" style=\"color:darkgreen\"></i></a><br>";
                            echo "<a id=\"down_" . $pet_Id . "\"><i class=\"fas fa-arrow-down\" style=\"color:darkgreen\"></i></a>";
                        echo "</div>";
                        echo "<div class=\"familiarsdiv4\">";
 
                            // echo $pet_Id;
                            echo $familiars[$pet_Id];
                            // echo $familiars_data, " - ", $familiars;
                        echo "</div>";
                    echo "</div>";
                }
            }
[PHP] pobierz, plaintext 

[trueblue]

Atrybut id elementu ma wartość unikalną - nie może być kilka elementów z tym samym id.

[topcio]

no ma unikalną.

[PHP] pobierz, plaintext 
id=\"down_" . $pet_Id . "\
[PHP] pobierz, plaintext 

[viking]

Za każdym razem gdy klikasz, przypinasz nowe zdarzenie. Zastosuj nasłuchiwanie na rodzicu.
https://prophp.pl/article/28/propagacja_i_d...en_w_javascript

[topcio]

jest na rodzicu
w kodzie php nie wkleiłem początku

[PHP] pobierz, plaintext 
        if ($value_of_setting_right == "Pet") {
            echo "<li>";
            echo $value_of_setting_right, ": &nbspAktualnie Wybrany:   &nbsp&nbsp";
            echo "<a href=\"#\" id=\"\"><i class=\"fas fa-arrow-up\" style=\"color:darkgreen\"></i></a>&nbsp&nbsp";
            echo "<a href=\"#\" id=\"\"><i class=\"fas fa-arrow-down\" style=\"color:darkgreen\"></i></a>";
            echo "<div id=\"familiar_items\">";
            $familiarData = 'familiarData';
            $petUnlocked = 'petUnlocked';
            foreach ($acc_settings_file_json->$familiarData as $item) {
                if ($item->petUnlocked == true) {
                    $pet_Id = $item->petId;
                    echo "<div class=\"familiars\" id=\"" . $pet_Id . "\">";
                        echo "<div class=\"familiarsdiv2\">";
                        // obrazek
                        echo "</div>";
                        echo "<div class=\"familiarsdiv3\">";
                            echo "<a id=\"up_" . $pet_Id . "\"><i class=\"fas fa-arrow-up\" style=\"color:darkgreen\"></i></a><br>";
                            echo "<a id=\"down_" . $pet_Id . "\"><i class=\"fas fa-arrow-down\" style=\"color:darkgreen\"></i></a>";
                        echo "</div>";
                        echo "<div class=\"familiarsdiv4\">";
 
                            // echo $pet_Id;
                            echo $familiars[$pet_Id];
                            // echo $familiars_data, " - ", $familiars;
                        echo "</div>";
                    echo "</div>";
                }
            }
            echo "</div>";
            echo "</li>";
            echo "</li>";
        } 
[PHP] pobierz, plaintext 

czyli JS słucha tego

[PHP] pobierz, plaintext 
echo "<div id=\"familiar_items\">";
[PHP] pobierz, plaintext 

chyba że coś źle myślę

[viking]

Źle myślisz. Jaka to jest wersja jquery?

[topcio]

2.1.3

poprawiłem trochę kod JS
niby przeskakuje góra dół

[PHP] pobierz, plaintext 
            $(document).ready(function(){
                var selected = null;
                var petID='';
                var itemlist = $('#familiar_items');
                var len=$(itemlist).children().length; 
                $("#familiar_items .familiars").click(function(){
                    selected= $(this).index();
                    petID= $(this).attr("id");
                    $("#familiar_items .familiars").css('border-color', 'lightskyblue');
                    $(this).css('border-color', 'lightgreen');
                    $("#up_" + petID).click(function(e){
                        if(selected > 0){
                            itemlist = $('#familiar_items');
                            console.log(selected);
                            jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected)));
                            e.preventDefault();
                        }
                    });
                    $("#down_" + petID).click(function(e){
                        if(selected < len) {
                            itemlist = $('#familiar_items');
                            console.log(selected);
                            jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected)));
                            e.preventDefault();
                        }
                    });
                });
            });
[PHP] pobierz, plaintext 

z tym, że teraz w konsoli dostaje
0
(5)1
(9)2
(13)3
(17)4
i za pierwszym klinięciem w dół przeskakuje, a każde kolejne muszę kliknąć dwa razy by była reakcja.

[viking]

Otwórz sobie konsolę, poklikaj up i zobacz co się loguje w konsoli.
https://jsfiddle.net/8w7smqhL/

[topcio]

Nie wiem, niestety nie posiadam takiej wiedzy jak Ty. nie potrafię dojść w ten sposób do tego co mam nie tak.

[viking]

Pokazałem jak możesz dobierać się do elementów po kliknięciu. Czytaj, ucz się. Samo nie przyjdzie.

[topcio]

Problem w tym, iż gdy przekopiuje to co pokazałeś do mnie, ustawię takie ID dla up down, to u mnie konsola nic nie pokazuje po kliknięciu

Ok to był mój błąd, pojawia się ale co dalej, no nic będę sam męczył.
Nie pierwszy raz tu się nie pomaga.
To tak jakby w szkole powiedzieć dziecku masz książkę, ucz się sam.
Ale dzięki za chęci.

Ten post edytował topcio 29.12.2022, 14:06:33

[viking]

Przyszedłeś z problemem kilkukrotnych klików. I pokazałem Ci jak sobie z nim poradzić. A że jesteś leń i czekasz na hotowca to inna sprawa. Naprawdę nie jest przyjemne przeglądanie takiej sieczki jak masz w kodzie więc chociaż fajnie jak byś się przyłożył i wrzucił okrojony kod na jsfiddle.

[topcio]

Niestety to Twój punkt widzenia, gdybym czekał na gotowca to nie miałbym nic napisane.
Przychodzę z problemem gdy nie mogę poradzić sobie sam.
No ale ok, dzięki za chęci.
Nie wiem co dla Ciebie jest sieczką, bo dla mnie jest czyste i przejrzyste.
No ale co autor to inne pisanie.
A zakładając z góry że ktoś jest leń, wystawiasz sobie świadectwo.
Dziękuję za pomoc, może ktoś bardziej kompetentny się jeszcze wypowie.

Tak dla potomnych

Zrobiłem, działa.

[PHP] pobierz, plaintext 
            $(document).ready(function(){
                var selected = null;
                var petID='';
                var itemlist = $('.familiars');
                var len=$(itemlist).length; 
                $("#familiar_items .familiars").click(function(){
                    selected= $(this).index();
                    petID= $(this).attr("id");
                    $("#familiar_items .familiars").css('border-color', 'lightskyblue');
                    $(this).css('border-color', 'lightgreen');
                    $("#up_" + petID).click(function(e){
                        e.preventDefault();
                        if(selected > 0){
                            itemlist = $('#familiar_items');
                            jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected)));
                        }
                    });
                    $("#down_" + petID).click(function(e){
                        e.preventDefault();
                        if(selected < len) {
                            itemlist = $('#familiar_items');
                            jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected)));
                        }
                    });
                });
            });
[PHP] pobierz, plaintext 

A problemem było to, że niestety w PHP pomiędzy DIV miałem ukryte inputy, które były traktowane również jako dzieci , nie zwróciłem na to uwagi.
Gdy przeniosłem je na koniec listy poza obsługiwanego diva, wszystko działa poprawnie.