Red de conocimiento informático - Material del sitio web - Cómo crear un patrón de estrella de comentario en HTML usando jquery

Cómo crear un patrón de estrella de comentario en HTML usando jquery

parte html:

Calificación general *

<

  • <

  • & lt;td>

    em{

    margen-derecho:5px;

    color:#c00;

    font-weight:bold;

    font-style:normal;

    margin-left:2px;

    }

    .nota {

    color: #999;

    }

    .para

    m-textarea{

    float: izquierda;

    font-family: Tahoma, Ginebra, sans-serif;

    margin-right: 5px;

    ancho: 598px;

    zoom: 1;

    familia de fuentes: heredar;

    tamaño de fuente: 100%;

    -webkit-appearance.textarea;

    -webkit-box-orient: vertical;

    -webkit-rtl-ordering: lógico;

    - webkit-user-select: texto;

    color de fondo: blanco;

    borde: 1px sólido;

    cursor: automático;

    relleno: 2px;

    cambiar tamaño: automático;

    espacio en blanco: ajuste previo;

    ajuste de palabra: romper-palabra;

    }

    .rating-wrap {

    display: inline-block;

    float: left;

    position: relativa ;

    arriba: -2px;

    ancho: 89px;

    alto: 20px;

    margen derecho: 5px; p>

    relleno: 4px 0 0 0 5px;

    borde: 1px sólido #EFE0D7;

    fondo: #FFF9F1;

    z- índice: 0;

    }

    .rating-wrap ul,.rating-wrap a:hover {

    imagen de fondo: url(. /images/ star_shade. png);

    fondo-repetición: no-repetir;

    }

    .rating-wrap ul {

    -webkit -padding -start: 40px;

    visualización: bloque;

    tipo-estilo de lista: disco;

    margen: 1em 0px;

    borde: 0px;

    margen: 0px;

    contorno: 0px;

    relleno:

    estilo de lista: ninguno;

    posición: relativa;

    ancho: 85px;

    alto: 16px;

    posición de fondo: 0 -90px;

    p>

    índice z: 10;

    }

    .rating-wrap li {

    display: inline;

    }

    .rating-wrap a {

    zoom: 1;

    posición: 0;

    pantalla: bloque;

    altura: 1

    6px;

    }

    .rating-wrap .cinco-estrellas {

    ancho.84px;

    índice z: 10;

    posición-fondo: 0 0px;

    }

    .rating-wrap .cuatro-estrellas {

    ancho: 68px;

    índice z: 20;;

    posición-fondo: 0 0px;

    }

    .rating-wrap .

    posición-fondo: 0 -18px;

    }

    .rating-wrap .tres-estrellas {

    ancho: 51px;

    índice z: 30;

    posición de fondo: 0 -36px;

    }

    .rating-wrap .two-stars {

    ancho: 34px;

    índice z: 40;

    posición-fondo: 0 -54px;

    }

    .rating-wrap .one-star {

    ancho: 17px;

    índice z: 50;

    posición de fondo: 0 -72px ;

    }

    .active-hint {

    color: #C00;

    float: izquierda; p>

    padding-top:2px;

    peso de fuente: normal;

    estilo de fuente:normal;

    }

    JS:

    $(document).ready(function(){

    $("#appraiseText").bind("keydown", function(){

    var count = $("#appraiseText").html(" Se superó " + (count - 200) + " uno palabra " );

    }

    });

    });

    var starValue=0;

    función onUlMouseOut(){

    var y = -90 + starValue * 18;

    var posición = "0 " + y + "px";

    $( ".rating-wrap-ul").css({

    "fondo-posición" : posición

    });

    }

    función onUlMouseOver() {

    $(".rating-wrap-ul").getElementById(" ratingText").innerHTML="poor";break;

    caso 3: document.getElementById("ratingText").innerHTML="okay";break;

    <

    p> caso 4: document.getElementById("ratingText").innerHTML="muy bueno";break;

    Valor predeterminado: document.getElementById("ratingText").innerHTML="";

    }

    }

    función onLiMouseOut(){

    onLiMouseOver( starValue);

    }

    función clickStar(calificación){

    starValue = calificación

    var y = -90 + calificación * 18;

    var posición = "0 " + y + "px";

    $(".rating-wrap-ul").css({

    "posición de fondo" : posición

    });

    }

    Espero que esto ayude