6

Deseo incorporación en mi página web una página para poder opinar (valoración) sobre una reserva.

Quiero que las valoraciones vayan del 1(mínimo) al 5(máximo).

Código PHP:

//Si pulsamos el link "Nueva opinión"...
if(isset($_GET["nueva"])){
    //Llamamos al método "obtenerReservasPorCliente" y le pasamos el parámetro del email del cliente.
    $reservas = BD::obtenerReservasPorCliente("[email protected]");
    echo "<form action='menu_cliente.php?nueva=1' name='form_add_opinion' id='form_add_opinion' method='POST'>";
        $selected = true;
        foreach ($reservas as $reserva){
            $idreserva = $reserva["idreserva"];
            $idcabana = $reserva["idcabana"];
            $idemail = $reserva["idemail"];
            $check_in = new DateTime($reserva["check_in"]);
            $check_out = new DateTime($reserva["check_out"]);
            $reserva_toString = "Reserva de la cabaña ".$idcabana. " | ".$idemail. " | ".$check_in->format('d/m/Y'). " | ".$check_out->format('d/m/Y')."<br/><br/>";
            echo "<input type='radio' name='a_anadir' value='".$reserva["idreserva"]."' ".($selected?"checked":"").">".$reserva_toString."</input>";
            $selected = false;
        }
        echo "<br/>Deja tu opinión: <br/>";
        echo "<textarea rows='4' cols='56' id='texto_opinion' name='texto_opinion'></textarea><br/>";
        echo "<input type='submit' value='Añadir opinion' name='add_opinion' id='add_opinion'>";
    echo "</form>";
}

Quisiera que salgan dibujitos de estrellitas y automáticamente si pasas el ratón por encima se autorellenen de color amarillo y al hacer click se mantenga ese número de estrellas y se guarde el valor (1.2.3.4.5) en una $variable.

Sin tanto diseño podría ser algo similar a:

 <div class="valoracion">
    <input id="radio1" type="radio" name="estrellas" value="5"><!--
    --><label for="radio1">★</label><!--
    --><input id="radio2" type="radio" name="estrellas" value="4"><!--
    --><label for="radio2">★</label><!--
    --><input id="radio3" type="radio" name="estrellas" value="3"><!--
    --><label for="radio3">★</label><!--
    --><input id="radio4" type="radio" name="estrellas" value="2"><!--
    --><label for="radio4">★</label><!--
    --><input id="radio5" type="radio" name="estrellas" value="1"><!--
    --><label for="radio5">★</label>
  </div>

Código:

.valoracion {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.valoracion input {
    position: absolute;
    top: -100px;
}


.valoracion label {
    float: right;
    color: #c1b8b8;
    font-size: 30px; 
}

.valoracion label:hover,
.valoracion label:hover ~ label,
.valoracion input:checked ~ label {
    color: #ffff00;
}

Siempre se completa una estrella de menos. ¿Por qué?

3
  • Es código propio, será parecida pregunta pero es código de cosecha propia. Si se critica mi pregunta perdona...
    – omaza1990
    Commented el 20 dic. 2017 a las 14:06
  • No es un crítica a tu pregunta (yo soy uno de los +1 que tienes). La pregunta es perfectamente válida, sólo que me llamó la atención que hubiera gente preguntando por cosas parecidas (y específicas) en tan poco tiempo. No es común.
    – Alvaro Montoro
    Commented el 20 dic. 2017 a las 14:08
  • De acuerdo. Si agradezco las críticas pero se parecerá la pregunta, pero el código no creo que se parezca relativo a las "cabañas". Si se parecerá el código de las estrellas debido a que está "conseguido de un sitio de Google".
    – omaza1990
    Commented el 20 dic. 2017 a las 14:10

4 respuestas 4

7

Esto es algo que puedes conseguir simplemente aplicando CSS al HTML que ya tienes, sin necesidad de hacer cambios en el PHP o HTML o JS. La idea sería usar el selector contiguo (~) para cambiar el color a las estrellas (label) que se encuentren después del input marcado.

Le he quitado los comentarios para que se vea algo más limpio, y le he agregado estilos para obtener el mismo efecto:

p.clasificacion {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

p.clasificacion input {
  position: absolute;
  top: -100px;
}

p.clasificacion label {
  float: right;
  color: #333;
}

p.clasificacion label:hover,
p.clasificacion label:hover ~ label,
p.clasificacion input:checked ~ label {
  color: #dd4;
}
<p class="clasificacion">
  <input id="radio1" type="radio" name="estrellas" value="5">
  <label for="radio1">★</label>
  <input id="radio2" type="radio" name="estrellas" value="4">
  <label for="radio2">★</label>
  <input id="radio3" type="radio" name="estrellas" value="3">
  <label for="radio3">★</label>
  <input id="radio4" type="radio" name="estrellas" value="2">
  <label for="radio4">★</label>
  <input id="radio5" type="radio" name="estrellas" value="1">
  <label for="radio5">★</label>
</p>

11
  • 3
    Sencillo y simple, me ha servido de ayuda a mi también, gracias
    – Edu3D
    Commented el 20 dic. 2017 a las 14:31
  • ¿Por qué me sale un radio button al lado de cada estrella? He copiado tal cual tu código y me sale el radio.
    – omaza1990
    Commented el 20 dic. 2017 a las 15:01
  • @omaza1990 pulsa con el botón derecho sobre el radio button y dale a "inspeccionar". Se abrirá la consola de desarrollador. Mira en los estilos que se le están aplicando a ese radio button, debe haber alguno que sobrescriba los estilos compartidos en la pregunta.
    – Alvaro Montoro
    Commented el 20 dic. 2017 a las 15:05
  • No me sale nada del otro mundo, todo correcto por lo que veo.
    – omaza1990
    Commented el 20 dic. 2017 a las 15:07
  • 1
    Solucionado. He cambiado el <p class="valoracion> por el <div class=valoracion>. No entiendo aún porque con "p" no me funciona, y sí con "div".
    – omaza1990
    Commented el 20 dic. 2017 a las 15:20
4

Buenas amigo espero esto sea lo que buscas

Usamos la funcion change para obtener el cambio cuando el usuario selecciona una nueva estrella y hacerle un each() para iterar todos los input, en cada iteracion preguntamos si el valor es menor al index, solo si es menor o igual el index el valor seleccionado agregamos la clase activo.

Espero te ayude saludos

Ejemplo Funcional

$(".clasificacion").find("input").change(function(){
  var valor = $(this).val()
  $(".clasificacion").find("input").removeClass("activo")
  $(".clasificacion").find("input").each(function(index){
     if(index+1<=valor){
      $(this).addClass("activo")
     }
     
  })
})

$(".clasificacion").find("label").mouseover(function(){
  var valor = $(this).prev("input").val()
  $(".clasificacion").find("input").removeClass("activo")
  $(".clasificacion").find("input").each(function(index){
     if(index+1<=valor){
      $(this).addClass("activo")
     }
     
  })
})
.clasificacion input[type='radio'] {
    opacity: 0;
  }
  .clasificacion label {
    font-size: 30px;
    color:rgb(150, 150, 150);
    cursor: pointer;
  }
  .clasificacion label:hover {
    color: rgb(217, 215, 11);
  }
   .activo + label{
   color: rgb(255, 230, 0) !important;
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="clasificacion">
    <input id="radio1" type="radio" name="estrellas" value="1"><!--
    --><label for="radio1">★</label><!--
    --><input id="radio2" type="radio" name="estrellas" value="2"><!--
    --><label for="radio2">★</label><!--
    --><input id="radio3" type="radio" name="estrellas" value="3"><!--
    --><label for="radio3">★</label><!--
    --><input id="radio4" type="radio" name="estrellas" value="4"><!--
    --><label for="radio4">★</label><!--
    --><input id="radio5" type="radio" name="estrellas" value="5"><!--
    --><label for="radio5">★</label>
  </p>

9
  • Muchas gracias Luis Daniel, ¿existe la posibilidad que se marquen las anteriores estrellas además de la seleccionada? Es decir, que si paso el ratón por encima de la estrella 3, también se pinchen la 1 y la 2, antes de hacer click y se pinten las 3.
    – omaza1990
    Commented el 20 dic. 2017 a las 14:08
  • Ya le hice el cambio espero te ayude saludos Commented el 20 dic. 2017 a las 16:17
  • Daniel ¿Por qué sale una estrella de menos de la que está marcada? Si marco 3, salen 2. Siempre una menos.
    – omaza1990
    Commented el 20 dic. 2017 a las 19:02
  • Ya lo acomode era un error de sintaxis saludos Commented el 20 dic. 2017 a las 20:42
  • ¿Por qué en mi ejemplo en la pregunta me sale siemrpre una menos?
    – omaza1990
    Commented el 20 dic. 2017 a las 21:20
1

¿Te has planteado utilizar algun plugin de jQuery para realizarlo? Una posibilidad podría ser utilizar este del siguiente enlace:

http://rateyo.fundoocode.ninja/

Te proporcionará muchas más posibilidades que creando un script propio.

1
  • 1
    Amigo esta genial tu propuesta mejora la respuesta has un ejemplo y agrega mas información para que sea aceptada Commented el 20 dic. 2017 a las 20:44
-1

Las estrellas no me salen con colores pongo todo tal cual y solo me deja clickearlas y deja el color azul como seleccionado, como podria hacer para que cuando pase el raton por encima haga el color amarillo y seleccione ? ayuda

2
  • 2
    Hola, esto no es una respuesta. Revisa Cómo preguntar para que tu pregunta tenga una buena aceptación además de como responder para que consideres los puntos recomendados. Con tu participación en el sitio obtendrás la reputación necesaria para poder comentar. Commented el 17 mar. 2021 a las 0:06
  • Yo te recomendaria editar o eliminar tu respuesta como ya ha comentado @AbrahamChan, que esto no es una respuesta. Si tienes una duda, formula una pregunta y toda la comunidad estará encantada de ayudarte. Saludos
    – Euricky999
    Commented el 30 dic. 2023 a las 16:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.