javascript - 显示每个评级星的消息

Question

我有评级插件，可以正常工作，每个评级都有警报。但是我不需要提醒，而是需要为每个评级星显示消息(如果评级是 1-差、2-差、3-平均、4-好、5-好)。需要在评分星级旁边显示这些消息。

而且当它被评为 3 星时，需要显示一个 div(以显示一些信息)并在选择其他启动时隐藏相同的 div。

并且当用户评分低于3星时，需要给一个文本框(.comment div)来输入评论，当评分超过3星时隐藏它。

这是用于评级的代码:

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

Answer 1

此演示有效，使用数据属性来显示评级消息以及显示和隐藏评论 block 。

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>