显示每个评级星的消息

Question

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

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

并且当用户评分低于3星时，需要给一个textbox（.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

你好，如果你点击评级按钮比在你的 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>

Answer 2

编辑：Fiddle 更新了消息

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

看看这个fiddle

Answer 3

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

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>

显示每个评级星的消息

Display message for each rating stars

html

javascript

css

jquery

rating