Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [MySQL][PHP]Star rating
Forum PHP.pl > Forum > Przedszkole
Sklep102
8.03.2020, 01:46:44
Cześć,
Znalazłem najprostszy skrypt Star rating na stronie 
[HTML] pobierz, plaintext 
  1. http://blog.hackerkernel.com/2015/11/01/star-rating-system-in-php-mysql-jquery/
[HTML] pobierz, plaintext

Mam pytanie odnośnie tego w jaki sposób wyświetlić ocenę z bazy danych tzn:

Mam ocenę 5 gwiazdek i jedyna możliwość jaka przychodzi mi do głowy aby to wyświetlić to:

[PHP] pobierz, plaintext 
  1. echo "
  2. <div id='star-container'>
  3. <i class='fa fa-star fa-2x star' id='star-1' style='color: gold;'></i>
  4. <i class='fa fa-star fa-2x star' id='star-2' style='color: gold;'></i>
  5. <i class='fa fa-star fa-2x star' id='star-3' style='color: gold;'></i>
  6. <i class='fa fa-star fa-2x star' id='star-4' style='color: gold;'></i>
  7. <i class='fa fa-star fa-2x star' id='star-5' style='color: gold;'></i>
  8. <i class='fa fa-star fa-2x star' id='star-6' ></i>
  9.  
  10.  
  11. </div>
  12. ";
[PHP] pobierz, plaintext

I tutaj pojawia się pytanie odnośnie tego jak to poprawnie zrobić ponieważ chciałbym po najechaniu myszką zaznaczały się gwiazdki a jeśli zrobię to na sztywno jak wyżej nie mam takiej możliwości.

Index
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.     <title>5 Star Rating System In PHP, MySql & jQuery</title>
  4.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
  5.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  6.     <link rel="stylesheet" type="text/css" href="style.css">
  7. </head>
  8. <body>
  9.     <input type="hidden" value="HERE COME THE PRODUCT ID" id="product_id">
  10.     <div class="container">
  11.         <h1>Star Rating System</h1>
  12.         <div id="star-container">
  13.             <i class="fa fa-star fa-3x star" id="star-1"></i>
  14.             <i class="fa fa-star fa-3x star" id="star-2"></i>
  15.             <i class="fa fa-star fa-3x star" id="star-3"></i>
  16.             <i class="fa fa-star fa-3x star" id="star-4"></i>
  17.             <i class="fa fa-star fa-3x star" id="star-5"></i>
  18.         </div>
  19.         <div id="result"></div>
  20.     </div>
  21.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  22.     <script type="text/javascript" src="main.js"></script>
  23. </body>
  24. </html>
[HTML] pobierz, plaintext


main.js
[PHP] pobierz, plaintext 
  1. $(document).ready(function(){
  2.     /*STAR RATING*/
  3.  
  4.     $('.star').on("mouseover",function(){
  5.         //get the id of star
  6.         var star_id = $(this).attr('id');
  7.         switch (star_id){
  8.             case "star-1":
  9.                 $("#star-1").addClass('star-checked');
  10.                 break;
  11.             case "star-2":
  12.                 $("#star-1").addClass('star-checked');
  13.                 $("#star-2").addClass('star-checked');
  14.                 break;
  15.             case "star-3":
  16.                 $("#star-1").addClass('star-checked');
  17.                 $("#star-2").addClass('star-checked');
  18.                 $("#star-3").addClass('star-checked');
  19.                 break;
  20.             case "star-4":
  21.                 $("#star-1").addClass('star-checked');
  22.                 $("#star-2").addClass('star-checked');
  23.                 $("#star-3").addClass('star-checked');
  24.                 $("#star-4").addClass('star-checked');
  25.                 break;
  26.             case "star-5":
  27.                 $("#star-1").addClass('star-checked');
  28.                 $("#star-2").addClass('star-checked');
  29.                 $("#star-3").addClass('star-checked');
  30.                 $("#star-4").addClass('star-checked');
  31.                 $("#star-5").addClass('star-checked');
  32.                 break;
  33.         }
  34.     }).mouseout(function(){
  35.         //remove the star checked class when mouseout
  36.         $('.star').removeClass('star-checked');
  37.     });
  38.  
  39.  
  40.     $('.star').click(function(){
  41.         //get the stars index from it id
  42.         var star_index = $(this).attr("id").split("-")[1],
  43.             product_id = $("#product_id").val(), //store the product id in variable
  44.             star_container = $(this).parent(), //get the parent container of the stars
  45.             result_div = $("#result"); //result div
  46.  
  47.         $.ajax({
  48.             url: "store_rating.php",
  49.             type: "POST",
  50.             data: {star:star_index,product_id:product_id},
  51.             beforeSend: function(){
  52.                 star_container.hide(); //hide the star container
  53.                 result_div.show().html("Loading..."); //show the result div and display a loadin message
  54.             },
  55.             success: function(data){
  56.                 result_div.html(data);
  57.             }
  58.         });
  59.     });
  60.  
  61. });
[PHP] pobierz, plaintext




trueblue
8.03.2020, 07:57:04
Do stylowania gwiazdek służy klasa star-checked co wyraźnie widać w pliku main.js, a nie style inline jak to zrobiłeś.
Sklep102
8.03.2020, 20:32:38
Cytat(trueblue @ 8.03.2020, 07:57:04 ) *
Do stylowania gwiazdek służy klasa star-checked co wyraźnie widać w pliku main.js, a nie style inline jak to zrobiłeś.


Dzięki, poprawiłem możesz mi jeszcze wyjaśnić jak najprościej wyświetlić to w ajax?
[PHP] pobierz, plaintext 
  1.                         <div id='star-container'>
  2.                         <i class='fa fa-star fa-2x star star-checked' id='star-1'></i>
  3.                         <i class='fa fa-star fa-2x star star-checked' id='star-2'></i>
  4.                         <i class='fa fa-star fa-2x star star-checked' id='star-3'></i>
  5.                         <i class='fa fa-star fa-2x star star-checked' id='star-4'></i>
  6.                         <i class='fa fa-star fa-2x star' id='star-5'></i>
  7.                         </div>";
[PHP] pobierz, plaintext


Ponieważ jeśli użyję zwykłego php i najadę i wyjadę po za to gwiazdki przestają się wyświetlać, wydaje mi się że problemem jest tutaj to że idzie to php?
trueblue
9.03.2020, 11:00:46
Kiedy wyjedziesz poza gwiazdki, to najzwyczajniej mysz nie jest nad żadną z nich, dlatego też nie podświetlają się.
Sklep102
9.03.2020, 21:57:40
Dlatego pytam czy jeśli zrealizuję to za pomocą ajax to będzie tak jak powinno?
trueblue
9.03.2020, 22:37:26
A uważasz, że kiedy zrealizujesz to za pomocą ajax, to nie zdarzy Ci się przesunąć myszy poza gwiazdki?
Sklep102
9.03.2020, 22:48:38
Sądziłem że jeśli zrobię to ajaxem to po wyjechaniu znów się pojawi zaznaczenie takie jak było, ale z tego co mówisz chyba źle myślę.
W takim razie możesz mi wyjaśnić jak jest realizowane zapamiętywanie tych gwiazdek?

[HTML] pobierz, plaintext 
  1. https://plugins.krajee.com/star-rating-demo-basic-usage#basic-example-2
[HTML] pobierz, plaintext

Jeśli możesz spójrz na przykład drugi, jeśli zaznaczysz 3 gwiazdki i wyjedziesz to dalej jest 3 gwiazki chyba że klikniesz np. 4 chciałbym wiedzieć w jaki sposób mogę to zrealizować ponieważ mam bazę
wybieram gwiazdki i chciałbym żeby się pojawiły np. znów 4 gwiazdki po wyjechaniu jeśli nie zmieniłem oceny.
trueblue
10.03.2020, 09:09:37
Co innego to najechanie/zjechanie, a co innego zaznaczanie.
Podczas kliknięcia należy zapisać ilość gwiazdek, a przy wyświetlaniu pobrać tą wartość i zaznaczyć odpowiednią ilość gwiazdek (klasa star-checked).
Sklep102
11.03.2020, 22:32:40
Zrobiłem coś takiego

//remove the star checked class when mouseout
$('.star').removeClass('star-checked');
//get raiting star with db
var rating=document.getElementById("hiddenstar").value;

if (rating === 0){
document.getElementById("div").innerHTML = "
<div id='star-container'>
<i class='fa fa-star fa-2x star ' id='star-1'></i>
<i class='fa fa-star fa-2x star ' id='star-2'></i>
<i class='fa fa-star fa-2x star ' id='star-3'></i>
<i class='fa fa-star fa-2x star ' id='star-4'></i>
<i class='fa fa-star fa-2x star ' id='star-5'></i>
<i class='fa fa-star fa-2x star ' id='star-6'></i>
</div>";

}
Może ktoś wyjaśnić w jaki sposób to obsłużyć jeśli myszka po za gwiazdką wyświetl zaznaczone np. 3 gwiazdki na podstawie pola hiddenstar jeśli oneclick to zostaje oneclick.
trueblue
11.03.2020, 22:48:07
Jeśli wartość w bazie wynosi 3, to trzem pierwszym gwiazdkom nadajesz klasę star-checked.
Po co jakieś dziwne kombinacje z JS, skoro możesz to zrobić w PHP? A jeśli nawet nie w PHP, to po co tworzyć całą strukturę (poprzez zmianę innerHTML), skoro wystarczy nadać klasy poprzez classList.add?
Co jest niezrozumiałego dla Ciebie w dodawaniu klasy do elementu?
Sklep102
11.03.2020, 23:10:31
Rozumiem to jak najbardziej że wystarczy dodać klasę i będzie zaznaczona odpowiednia gwiazdka. Tutaj chodzi mi o możliwość edycji oceny tzn: Mam plik edycja i jeśli wybiorę to za pomocą php i wyjadę po za gwiazdki to niestety zaznaczenie się kasuję mimo że nie zmieniłem oceny. Dlatego pytam w jaki sposób można rozwiązać ten problem. Aby pojawiło się zaznaczenie po wyjechaniu po za gwiazdki(odczytane z bazy)

Wiem że można usunąć
[PHP] pobierz, plaintext 
  1.     }).mouseout(function(){
  2.         //remove the star checked class when mouseout
  3.         $('.star').removeClass('star-checked');
  4.     });
[PHP] pobierz, plaintext


ale wtedy wcale nie będzie usuwało zaznaczenia...

Chodzi o jak najprostsze rozwiązanie
trueblue
11.03.2020, 23:44:03
Na zdarzenie click ustawiasz wartość zmiennej abc na liczbę gwiazdek.
W zdarzeniu mouseout ustawiasz taką liczbę gwiazdek jaką ma wartość zmiennej abc.
Sklep102
12.03.2020, 21:42:52
Przerasta to moje możliwości jeśli chodzi o js ale dziękuje za pomoc.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.