[AJAX][jQuery]dodanie pętli Opcje

[phpuser88]

jQuery jest trudniejsze i bardziej skomplikowane niż się wydawało, a wydawało się naprawdę trudne... (IMG:style_emoticons/default/ohno-smiley.gif)
Pomijam fakt, że w sieci brak zgrabnego gotowca (jQuery, AJAX, PHP5.6) najprostszego systemu głosowania +/- 1 dla np. komentarza. (albo nie umiem szukać)

Na podstawie kilkunastu różnych kodów z Internetu zlepiłem jeden funkcjonalny skrypt, który (po kliknięciu) ma za zadanie:
1. przyznać ocenę +1 (tj. zwiększyć zawczasu, sztucznie licznik aktualnej oceny +1)
a) wysłać ID_komentarza z rodzajem_oceny(+/-) do PHP i tam po weryfikacji zrobić Update SQL (po stronie PHP brak problemów)
2. sformatować kolorystycznie kliknięty button "plus" oraz usunąć możliwość kliknięcia w button "minus" za pomocą display:none;
3. wrzucić ocenionego komentarza (tj. ID_komentarza) do localStorage, żeby user wiedział co już ocenił.
4. sprawdzić ID_komentarza z localStorage i jeśli istnieje, to sformatować kolorystycznie na stałe. (tj. do czasu usunięcia pamięci lokalnej www)

Generalnie wszystko działa dla jednego komentarza. Siedziałem nad tym dwa dni i jestem pewny, że można to zrobić znacznie lepiej, ale składnia i jej logika mnie dobija więc będę wdzięczny za naprowadzenie w jaki sposób edytować kod, aby wrzucić w jakąś (IMG:style_emoticons/default/brzydal.gif) pętle, która automatycznie pobiera i sprawdza (tj. formatuje jeśli oceniono) wszystkie wyświetlone komentarze (tj. ID_komentarza).

[PHP] pobierz, plaintext 
    $(document).ready(function() {
        $('.punkt').click(function () {
 
            if ($(this).hasClass("current")) {
              // $("#1 .suma").text("Zagłosowano.");
            } else {
                var id_koment = $(this).parent("div").attr("id");
                var rodzaj = $(this).attr("class");
                var error = false;
 
				//formatowanie
                if ($(this).hasClass("plus")) {
                    $("#1 .1").css("color", "green");
                    $("#1 .1").css("font-weight", "bold");
                    $("#1 .0").css("display", "none");//likwiduje minusa
 
					//plus jeden
					var suma = +$("#1 .sumai").val() + 1;
					$("#1 .sumai").val(suma);	
 
					//zapisanie na local	
					localStorage.setItem('id_koment', id_koment);					
 
					//update
					$.ajax({
					  type: "POST",
					  url: "db.php",
					 data: { 
					 id_koment: id_koment, 
					 rodzaj: rodzaj,
					 csrf: <?php echo $_SESSION['key']; ?>
					 }
					}).done(function (data) {
					  console.log(data);
					});                    
 
                }
 
                else if($(this).hasClass("down")) {
                    alert("głos -1");
                }
                //removes all the votes 
                $(this).parent("div").children().removeClass("current");
 
                if(!error) {
                    $(this).addClass("current");
                } else {
                    alert("jakis problem....");
                }
            }
            return false;
        });
    });
 
<div id="1" class="idkom1">
    <a class="punkt plus" href="#">
      <div class="1">plus +</div>
    </a>
 
    <div class="suma">
		<input class="sumai" type="number" value="12">
    </div>    
 
    <a class="vote down" href="#">
     <div class="0">minus -</div>
    </a>
</div>
 
var pobieramid = JSON.parse(localStorage.getItem("id_koment"));
	$("#"+pobieramid+" .plus").removeClass("plus"); //usuwam mozliwosc dodania kolejnej wartosci +1
	$("#"+pobieramid+" .0").css("display", "none");//likwiduje minusa
	$("#"+pobieramid+" .1").css("color", "red");
	$("#"+pobieramid+" .1").css("font-weight", "bold");
[PHP] pobierz, plaintext 

[phpuser88]

woow! @aras785, wielkie dzięki za poświęcony czas! nie testowałem Twojego rozwiązania, ale na pierwszy rzut oka wygląda konkretnie w porównaniu do moich wypocin. Mój problem przed chwilą (raczej) rozwiązałem w taki sposób, że inaczej zapisuje na localStorage, a na końcu inaczej odczytuje i generalnie na pierwsze testy wszystko hula jak należy:

[PHP] pobierz, plaintext 
var data = existing ? existing + id_koment : id_koment;
localStorage.setItem('id_koment', data+',');
// ...
pobieramid = localStorage.getItem("id_koment");
let ids = pobieramid.split(",");
for(let id of ids)
{
    $("#"+id + " .plus").removeClass("plus"); 
    $("#"+id + " .1").css("color", "red");
    $("#"+id + " .1").css("font-weight", "bold");
    $("#"+id + " .0").css("display", "none");
}
[PHP] pobierz, plaintext 

Ze wstępnych oględzin amatora wygląda na to, że jedna klasa (.commented) obsługuje formatowanie końcowe dla obu kliknięć, co defacto będzie prowadziło do błędnego kolorowania dla plusa bądź minusa - będę musiał to rozszyfrować aby dodać drugą klase. (IMG:style_emoticons/default/worriedsmiley.gif) Zapisujesz też więcej danych w tablicy co jest jak najbardziej spoko, bo można zamknąć się w jednym kluczu, a później łatwo zweryfikować ocenę komentarza bez dodatkowego kombinowania z dwoma kluczami(+/-):

[PHP] pobierz, plaintext 
{action: "down", commentId: "1"}
{action: "down", commentId: "2"}
{action: "down", commentId: "3"}
[PHP] pobierz, plaintext 

moje rozwiązanie było lżejsze zważając na limit 5242878 znaków dla jednego klucza, ale musiałbym kombinować z dwoma kluczami. ^^

[PHP] pobierz, plaintext 
1,2,3
[PHP] pobierz, plaintext 

Skrócę Twoją formę do: {a:"d",i:"1"} i z przyjemnością przygarnę cały wzór pod grunt do budowy. (IMG:style_emoticons/default/biggrin.gif)

A tak jeszcze z ciekawości odnośnie wydajności aplikacji po stronie SQL & PHP....
1. Lepiej za każdym razem Insertować na nowo i później pojedynczo zliczać każdą ocenę dla ID_kom
2. Czy lepiej Updatować jeden dany ID_kom o oceny?
Osobiście obstaje przy rozwiązaniu 2. ale wole się upewnić.
Niby insert jest szybszy i można do niego dodać id_usera, który głosował co jest na plus przy statystykach, ale z drugiej strony będzie więcej danych i trzeba będzie liczyć by uzyskać sume ocen, a to też będzie swoje kosztować.

Jeszcze raz wielkie dzięki!

Ten post edytował phpuser88 7.05.2022, 04:47:52