[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 

[aras785]

Cześć,

ja bym zrobił coś takiego: https://jsfiddle.net/nh584c7f/

[HTML] pobierz, plaintext 
<div data-comment-id="1" data-element="comment" class="comment">
  <a class="comment_button" href="#" data-action="up">
    <div class="1">plus +</div>
  </a>
  <div class="suma">
    <input class="sumai" type="number" value="1">
  </div>
 
  <a class="comment_button" href="#" data-action="down">
    <div class="0">minus -</div>
  </a>
</div>
<div data-comment-id="2" data-element="comment" class="comment">
  <a class="comment_button" href="#" data-action="up">
    <div class="1">plus +</div>
  </a>
  <div class="suma">
    <input class="sumai" type="number" value="1">
  </div>
 
  <a class="comment_button" href="#" data-action="down">
    <div class="0">minus -</div>
  </a>
</div>
<div data-comment-id="3" data-element="comment" class="comment">
  <a class="comment_button" href="#" data-action="up">
    <div class="1">plus +</div>
  </a>
  <div class="suma">
    <input class="sumai" type="number" value="1">
  </div>
 
  <a class="comment_button" href="#" data-action="down">
    <div class="0">minus -</div>
  </a>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
.comment {
  background: #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
 
.commented [data-action] {
  font-weight: bold;
  color: green;
}
 
.commented__down [data-action="up"] {
  display: none;
}
 
.commented__up [data-action="down"] {
  display: none;
}
[HTML] pobierz, plaintext 

Kod

$(document).ready(function() {
  //$('[data-element="comment"]:not(.commented) [data-action]') - coś mi ten not nie działa stąd IF niżej
  $('[data-element="comment"] [data-action]').off('click').on('click', function(commentEvent) {
    commentEvent.preventDefault();

    let currentComment = $(this).closest('[data-element="comment"]');

    if (!currentComment.hasClass('commented')) {
      let action = $(this).attr('data-action');

      //tutaj tymczosow zmieniamy liczbę ocen
      currentComment.find('input').val(parseInt(currentComment.find('input').val()) + (('up' === action) ? 1 : -1));
      currentComment.addClass('commented').addClass('commented__'+action);

      $.ajax({
        type: "POST",
        url: "https://httpbin.org/post",
        data: {
          id_koment: currentComment.attr('data-comment-id'),
          rodzaj: action,
          csrf: 'test'
        }
      }).done(function(data) {
        //zatwierdzamy liczbę ocen z danymi z backendu
        //currentComment.find('input').val(data);
        addCommentToLocalStorage(currentComment.attr('data-comment-id'), action);
      });
    }
  });
});

if (getCommentFromLocalStorage()) {
    $.each(getCommentFromLocalStorage(), function(index, comment) {
      $('[data-element="comment"][data-comment-id="'+comment.commentId+'"]')
        .addClass('commented')
        .addClass('commented__'+comment.action);
  });
}

function getCommentFromLocalStorage() {
  return JSON.parse(localStorage.getItem("id_koment"));
}


function addCommentToLocalStorage(commentId, action) {
  let comments = getCommentFromLocalStorage();
  if (comments === null) {
    comments = [{'action': action, 'commentId': commentId}];
  } else if (!comments.includes(commentId)) {
    comments.push({'action': action, 'commentId': commentId});
  }

  localStorage.setItem("id_koment", JSON.stringify(comments));
}

Pozdrawiam

Ten post edytował aras785 6.05.2022, 23:30:52