Tengo un complemento de calificación que funciona bien con alertas para cada calificación. Pero en lugar de alerta, necesito mostrar un mensaje para cada estrella de calificación como (si la calificación es 1-Pobre, 2-Malo, 3-Promedio, 4-Bueno, 5-Impresionante). Es necesario mostrar estos mensajes junto a las estrellas de calificación.

Y también cuando tiene una calificación de 3 estrellas, debe mostrar un div (para mostrar alguna información) y ocultar el mismo div cuando se selecciona otro inicio.

Y cuando las tarifas de los usuarios comienzan por debajo de 3, debe dar un textbox (.comment div) para ingresar comentarios y ocultarlo cuando la calificación es más de 3 estrellas.

Aquí está el código utilizado para calificar:

var $me = $( '.star-ctr' );

   var $bg, $fg, step, wd, cc,
       sw, fw, cs, cw, ini;

   $bg = $me.children( 'ul' );
   $fg = $bg.clone().addClass( 'star-fg' ).css( 'width', 0 ).appendTo( $me );
   $bg.addClass( 'star-bg' );

   function initialize() {

      ini = true;

      // How many rating elements
      cc = $bg.children().length;

      // Total width of the bar
      wd = $bg.width();

      // Width of one rating element; assumes all are the
      // same width;  Used if step > cc
      sw = $bg.children().first().outerWidth( true );

      // Width of each star (including spacing)
      fw = wd / cc;
   }

   $me.mousemove(function( e ) {

       if ( !ini ) initialize();

       var dt, nm, nw, ns, ow, vl;

      // Where is the mouse relative to the left
      // side of the bar?
      dt = e.pageX - $me.offset().left;

      // Find the per element step
      vl = nm = Math.floor( dt / fw );
      nw = $fg.children().eq( nm ).position().left;

      ns = Math.round( ( dt - nw ) / sw );
      ow = nw + ns * sw;

      $me.attr( 'data-value', vl );
      $fg.css( 'width', Math.round( ow )+'px' );

   }).click(function() {

       // Grab value
       alert( $( this ).attr( 'data-value' ) );

       return false;
   });

Demo

1
user3932810 28 jun. 2016 a las 10:37

3 respuestas

La mejor respuesta

Esta demostración funciona, utilizando atributos de datos para mostrar los mensajes de calificación y también mostrando y ocultando el bloque de comentarios.

var 
    // Stars
    stars = $('.stars'),
    star  = stars.find('.star'),
    // Messages
    rating = $('.rating'),
    // 3 star information block
    information = $('.information'),
    // Comment block
    comment = $('.comment');

star.on('click', function() {
  var that  = $(this),
      value = that.data()['rating'];

  // Remove class for selected stars
  stars.find('.-selected').removeClass('-selected');

  // Add class to the selected star and all before
  for (i = 1; i <= value; i++) {
    stars.find('[data-rating="' + i + '"]').addClass('-selected');
  }

  // Show text that explains the rating value
  rating.find('.-visible').removeClass('-visible');
  rating.find('[data-rating="' + value + '"]').addClass('-visible');

  // Show information block if value is 3
  if (value === 3) {
    information.show();
  } else {
    information.hide();
  }

  // Show comments block, if value is 3 or lower
  if (value <= 3) {
    comment.show();
  } else {
    comment.hide();
  }
});
.stars {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  font-size: 3em;
}

.stars ul {
  white-space: nowrap;
  list-style: none;
  padding: 0;
}

.stars li {
  float: left;
}

.star {
  color: silver;
  cursor: pointer;
  padding: 0 2px;
}

.star.-selected {
  color: yellow;
}

.comment,
.information {
  display: none;
  padding: 5px 10px;
}

.comment {
  background: aqua;
}

.information {
  background: lightgreen;
}

.rating {
  display: inline-block;
  vertical-align: middle;
}

.message {
  display: none;
}

.message.-visible {
  display: block;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h4>Full Step Rating</h4>

<div class="stars">
  <ul>
    <li><span data-rating="1" class="star glyphicon glyphicon-star"></span></li>
    <li><span data-rating="2" class="star glyphicon glyphicon-star"></span></li>
    <li><span data-rating="3" class="star glyphicon glyphicon-star"></span></li>
    <li><span data-rating="4" class="star glyphicon glyphicon-star"></span></li>
    <li><span data-rating="5" class="star glyphicon glyphicon-star"></span></li>
  </ul>
</div>

<div class="rating">
  <span data-rating="1" class="message -poor">Poor</span>
  <span data-rating="2" class="message -bad">Bad</span>
  <span data-rating="3" class="message -average">Average</span>
  <span data-rating="4" class="message -good">Good</span>
  <span data-rating="5" class="message -awesome">Awesome</span>
</div>

<div class="information">
  3 stars info block.
</div>

<div class="comment">
  <textarea></textarea>
</div>
1
Jakub Vaněk 28 jun. 2016 a las 11:47

Editar: Fiddle actualizado con mensajes

if($( this ).attr( 'data-value' ) <= 2){
    if($( this ).attr( 'data-value' ) < 2){
        $(".comment").append("<br><textarea></textarea>");
    }
    $(".comment").show();
  }

Eche un vistazo a este fiddle

0
Roxoradev 28 jun. 2016 a las 07:50

HI ahora intente esto si hace clic en el botón de calificación que escribe este código en su js

var valueData = $( this ).attr( 'data-value' ) ;
       if(valueData => 2){
          if(valueData == 2){
            $('.comment').text('Average');
          } else if(valueData == 3){
            $('.comment').text('Good');
          } else if(valueData == 4){
            $('.comment').text('Awesome');
          }
       }

Demo

   var $me = $( '.star-ctr' );

   var $bg, $fg, step, wd, cc,
       sw, fw, cs, cw, ini;

   $bg = $me.children( 'ul' );
   $fg = $bg.clone().addClass( 'star-fg' ).css( 'width', 0 ).appendTo( $me );
   $bg.addClass( 'star-bg' );

   function initialize() {

      ini = true;

      // How many rating elements
      cc = $bg.children().length;

      // Total width of the bar
      wd = $bg.width();

      // Width of one rating element; assumes all are the
      // same width;  Used if step > cc
      sw = $bg.children().first().outerWidth( true );

      // Width of each star (including spacing)
      fw = wd / cc;
   }

   $me.mousemove(function( e ) {
       
       if ( !ini ) initialize();

       var dt, nm, nw, ns, ow, vl;

      // Where is the mouse relative to the left
      // side of the bar?
      dt = e.pageX - $me.offset().left;
       
      // Find the per element step
      vl = nm = Math.floor( dt / fw );
      nw = $fg.children().eq( nm ).position().left;
          
      ns = Math.round( ( dt - nw ) / sw );
      ow = nw + ns * sw;

      $me.attr( 'data-value', vl );
      $fg.css( 'width', Math.round( ow )+'px' );

   }).click(function() {

       // Grab value
       var valueData = $( this ).attr( 'data-value' ) ;
       if(valueData => 2){
          if(valueData == 2){
            $('.comment').text('Average');
          } else if(valueData == 3){
            $('.comment').text('Good');
          } else if(valueData == 4){
            $('.comment').text('Awesome');
          }
       }
       alert( $( this ).attr( 'data-value' ) );

       return false;
   });
.star-ctr {
    display: inline-block;
    position: relative;
}

.star-ctr ul {
    white-space: nowrap;
    list-style: none outside none;
    padding-left: 0;
    overflow: hidden;
}

.star-fg {
    top: 0;
    position: absolute;
}

.star-ctr li {
    display: inline-block;
}

.star-ctr a > span {
    font-size: 3em;
}

.star-bg a > span {
    color: silver
}

.star-fg a > span {
    color: yellow;
}

.comment{background:aqua; height:40px}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div style="margin: 10px">
<h4>Full Step Rating</h4>
<div class="star-ctr">
  <ul>
    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
  </ul>
</div>
<div class="comment">
Need to enable this div only when the rating is 3 star
</div>
</div>
0
Rohit Azad 28 jun. 2016 a las 07:43