Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [AJAX][jQuery]dodanie pętli
phpuser88
post
Post #1





Grupa: Zarejestrowani
Postów: 66
Pomógł: 1
Dołączył: 4.05.2019
Skąd: PHP5.6

Ostrzeżenie: (0%)
-----


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).

  1. $(document).ready(function() {
  2. $('.punkt').click(function () {
  3.  
  4. if ($(this).hasClass("current")) {
  5. // $("#1 .suma").text("Zagłosowano.");
  6. } else {
  7. var id_koment = $(this).parent("div").attr("id");
  8. var rodzaj = $(this).attr("class");
  9. var error = false;
  10.  
  11. //formatowanie
  12. if ($(this).hasClass("plus")) {
  13. $("#1 .1").css("color", "green");
  14. $("#1 .1").css("font-weight", "bold");
  15. $("#1 .0").css("display", "none");//likwiduje minusa
  16.  
  17. //plus jeden
  18. var suma = +$("#1 .sumai").val() + 1;
  19. $("#1 .sumai").val(suma);
  20.  
  21. //zapisanie na local
  22. localStorage.setItem('id_koment', id_koment);
  23.  
  24. //update
  25. $.ajax({
  26. type: "POST",
  27. url: "db.php",
  28. data: {
  29. id_koment: id_koment,
  30. rodzaj: rodzaj,
  31. csrf: <?php echo $_SESSION['key']; ?>
  32. }
  33. }).done(function (data) {
  34. console.log(data);
  35. });
  36.  
  37. }
  38.  
  39. else if($(this).hasClass("down")) {
  40. alert("głos -1");
  41. }
  42. //removes all the votes
  43. $(this).parent("div").children().removeClass("current");
  44.  
  45. if(!error) {
  46. $(this).addClass("current");
  47. } else {
  48. alert("jakis problem....");
  49. }
  50. }
  51. return false;
  52. });
  53. });
  54.  
  55. <div id="1" class="idkom1">
  56. <a class="punkt plus" href="#">
  57. <div class="1">plus +</div>
  58. </a>
  59.  
  60. <div class="suma">
  61. <input class="sumai" type="number" value="12">
  62. </div>
  63.  
  64. <a class="vote down" href="#">
  65. <div class="0">minus -</div>
  66. </a>
  67. </div>
  68.  
  69. var pobieramid = JSON.parse(localStorage.getItem("id_koment"));
  70. $("#"+pobieramid+" .plus").removeClass("plus"); //usuwam mozliwosc dodania kolejnej wartosci +1
  71. $("#"+pobieramid+" .0").css("display", "none");//likwiduje minusa
  72. $("#"+pobieramid+" .1").css("color", "red");
  73. $("#"+pobieramid+" .1").css("font-weight", "bold");
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 27.09.2025 - 05:10