我有一个评级插件,它可以正常运行并提醒每个评级。但是,除了警报,我需要为每个评级明星显示消息(如果评级为1-Poor,2-Bad,3-Average,4-Good,5-Awesome)。需要在评级明星旁边显示这些消息。
当它被评为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;
});
答案 0 :(得分:1)
此演示有效,使用数据属性显示评级消息,同时显示和隐藏评论块。
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();
}
});
&#13;
.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;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
HI现在尝试这个,如果点击评级按钮,而不是在你的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;
});
&#13;
.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}
&#13;
<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>
&#13;
答案 2 :(得分:0)
编辑:小提琴已更新消息
if($( this ).attr( 'data-value' ) <= 2){
if($( this ).attr( 'data-value' ) < 2){
$(".comment").append("<br><textarea></textarea>");
}
$(".comment").show();
}
看看这个fiddle