星级评分点击addClass函数不会工作

时间：2016-11-01 08:56:36

标签： javascript jquery html css html5

我的js代码有一个问题。我已经从 codepen.io 创建了此DEMO。在这个演示中，你可以看到有一个树星div。

当你悬停星星然后.rate-btn-hover添加悬停的div类。我想添加点击功能，但我的点击功能代码不起作用。我做错了什么人都能在这帮助我？

var prevStars = $(this).prevAll();
var nextStars = $(this).nextAll();

$('.star').on('mouseover',function() {
  var prevStars = $(this).prevAll();
  prevStars.addClass('rate-btn-hover');
});
$('.star').on('mouseout',function(){
  var prevStars = $(this).prevAll();
  prevStars.removeClass('rate-btn-hover');
});
// Add rate-btn-hover after click
$("body").on("click", ".star", function(){
  var prevStars = $(this).prevAll();
  prevStars.addClass('rate-btn-hover');
});
body {
  /*background-color:#000000;*/
}
.container {
  position:relative;
  width:100%;
  max-width:500px;
  margin:0px auto;
  margin-top:50px;
}
.div {
  position:relative;
  width:100%;
  margin-bottom:10px;
  float:left;
}

.rate-ex1-cnt{
  width:150px; height: 30px;
  border:#e9e9e9 1px solid;
  background-color:  #f6f6f6;
}
.rate-ex1-cnt .rate-btn{
  width: 30px; height:30px;
  float: left;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png) no-repeat;
  cursor: pointer;
}
.rate-ex1-cnt .rate-btn:hover, .rate-ex1-cnt  .rate-btn-hover, .rate-ex1-cnt  .rate-btn-active{
  background: url(https://dl.dropboxusercontent.com/u/683504/www.codepen.io/stars.png) no-repeat;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s
}

.rate-ex2-cnt{
  width:150px; height: 30px;
  border:#e9e9e9 1px solid;
  background-color:  #f6f6f6;
}
.rate-ex2-cnt .rate-btn{
  width: 30px; height:30px;
  float: left;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png) no-repeat;
  cursor: pointer;
}
.rate-ex2-cnt .rate-btn:hover, .rate-ex2-cnt  .rate-btn-hover, .rate-ex2-cnt  .rate-btn-active{
  background: url(https://dl.dropboxusercontent.com/u/683504/www.codepen.io/stars.png) no-repeat;

  -webkit-animation-name: flipInX;
  animation-name: flipInX;
  -webkit-animation-duration: .75s;
  animation-duration: .75s
}
.rate-ex3-cnt{
  width:150px; height: 30px;
  border:#e9e9e9 1px solid;
  background-color:  #f6f6f6;
}
.rate-ex3-cnt .rate-btn{
  width: 30px; height:30px;
  float: left;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png) no-repeat;
  cursor: pointer;
}
.rate-ex3-cnt .rate-btn:hover, .rate-ex3-cnt  .rate-btn-hover, .rate-ex3-cnt  .rate-btn-active{
  background: url(https://dl.dropboxusercontent.com/u/683504/www.codepen.io/stars.png) no-repeat;

  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="div">
    <div class="rate-ex1-cnt" id"ab">
      <div id="1" class="star star-one-1 rate-btn star-one"></div>
      <div id="2" class="star star-one-2 rate-btn star-one"></div>
      <div id="3" class="star star-one-3 rate-btn star-one"></div>
      <div id="4" class="star star-one-4 rate-btn star-one"></div>
      <div id="5" class="star star-one-5 rate-btn star-one"></div>
    </div>
  </div>
  <div class="div">
    <div class="rate-ex2-cnt">
      <div id="1" class="star star-two-1 rate-btn star-two"></div>
      <div id="2" class="star star-two-2 rate-btn star-two"></div>
      <div id="3" class="star star-two-3 rate-btn star-two"></div>
      <div id="4" class="star star-two-4 rate-btn star-two"></div>
      <div id="5" class="star star-two-5 rate-btn star-two"></div>
    </div>
  </div>
  <div class="div">
    <div class="rate-ex3-cnt">
      <div id="1" class="star star-tree-1 rate-btn star-tree"></div>
      <div id="2" class="star star-tree-2 rate-btn star-tree"></div>
      <div id="3" class="star star-tree-3 rate-btn star-tree"></div>
      <div id="4" class="star star-tree-4 rate-btn star-tree"></div>
      <div id="5" class="star star-tree-5 rate-btn star-tree"></div>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

实际上是在添加类，但是当你鼠标移出时它会被删除。由于您有另一个班级2016-11-02 11:49:47 [scrapy] INFO: Scrapy 1.1.1 started (bot: google) 2016-11-02 11:49:47 [scrapy] INFO: Overridden settings: {'FEED_URI': 'item.csv', 'BOT_NAME': 'google', 'NEWSPIDER_MODULE': 'google.spiders', 'FEED_FORMAT': 'csv ', 'SPIDER_MODULES': ['google.spiders']} 2016-11-02 11:49:47 [scrapy] INFO: Enabled extensions: ['scrapy.extensions.telnet.TelnetConsole', 'scrapy.extensions.corestats.CoreStats', 'scrapy.extensions.feedexport.FeedExporter', 'scrapy.extensions.logstats.LogStats'] 2016-11-02 11:49:47 [scrapy] INFO: Enabled downloader middlewares: ['scrapy.downloadermiddlewares.httpauth.HttpAuthMiddleware', 'scrapy.downloadermiddlewares.downloadtimeout.DownloadTimeoutMiddleware', 'scrapy.downloadermiddlewares.useragent.UserAgentMiddleware', 'scrapy.downloadermiddlewares.retry.RetryMiddleware', 'scrapy.downloadermiddlewares.defaultheaders.DefaultHeadersMiddleware', 'scrapy.downloadermiddlewares.redirect.MetaRefreshMiddleware', 'scrapy.downloadermiddlewares.httpcompression.HttpCompressionMiddleware', 'scrapy.downloadermiddlewares.redirect.RedirectMiddleware', 'scrapy.downloadermiddlewares.cookies.CookiesMiddleware', 'scrapy.downloadermiddlewares.chunked.ChunkedTransferMiddleware', 'scrapy.downloadermiddlewares.stats.DownloaderStats'] 2016-11-02 11:49:47 [scrapy] INFO: Enabled spider middlewares: ['scrapy.spidermiddlewares.httperror.HttpErrorMiddleware', 'scrapy.spidermiddlewares.offsite.OffsiteMiddleware', 'scrapy.spidermiddlewares.referer.RefererMiddleware', 'scrapy.spidermiddlewares.urllength.UrlLengthMiddleware', 'scrapy.spidermiddlewares.depth.DepthMiddleware'] 2016-11-02 11:49:47 [scrapy] INFO: Enabled item pipelines: [] 2016-11-02 11:49:47 [scrapy] INFO: Spider opened 2016-11-02 11:49:47 [scrapy] INFO: Crawled 0 pages (at 0 pages/min), scraped 0 i tems (at 0 items/min) 2016-11-02 11:49:47 [scrapy] DEBUG: Telnet console listening on 127.0.0.1:6023 2016-11-02 11:49:47 [scrapy] DEBUG: Crawled (403) <GET http://www.engineering.ca reers360.com/search/college/bangalore> (referer: None) 2016-11-02 11:49:47 [scrapy] DEBUG: Ignoring response <403 http://www.engineerin g.careers360.com/search/college/bangalore>: HTTP status code is not handled or n ot allowed 2016-11-02 11:49:47 [scrapy] INFO: Closing spider (finished) 2016-11-02 11:49:47 [scrapy] INFO: Dumping Scrapy stats: {'downloader/request_bytes': 252, 'downloader/request_count': 1, 'downloader/request_method_count/GET': 1, 'downloader/response_bytes': 2473, 'downloader/response_count': 1, 'downloader/response_status_count/403': 1, 'finish_reason': 'finished', 'finish_time': datetime.datetime(2016, 11, 2, 6, 19, 47, 644833), 'log_count/DEBUG': 3, 'log_count/INFO': 7, 'response_received_count': 1, 'scheduler/dequeued': 1, 'scheduler/dequeued/memory': 1, 'scheduler/enqueued': 1, 'scheduler/enqueued/memory': 1, 'start_time': datetime.datetime(2016, 11, 2, 6, 19, 47, 403819)} 2016-11-02 11:49:47 [scrapy] INFO: Spider closed (finished) ，您可以在点击事件中使用它，如下所示。

rate-btn-active
$('.star').on('mouseover', function() {
  var prevStars = $(this).prevAll();
  prevStars.addClass('rate-btn-hover');
});
$('.star').on('mouseout', function() {
  var prevStars = $(this).prevAll();
  prevStars.removeClass('rate-btn-hover');
});
// Add rate-btn-hover after click
$("body").on("click", ".star", function() {
  $(this).siblings().removeClass('rate-btn-active')

  var prevStars = $(this).prevAll().addBack();
  prevStars.addClass('rate-btn-active');
});
.container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0px auto;
  margin-top: 50px;
}

.div {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  float: left;
}

.rate-ex1-cnt {
  width: 150px;
  height: 30px;
  border: #e9e9e9 1px solid;
  background-color: #f6f6f6;
}

.rate-ex1-cnt .rate-btn {
  width: 30px;
  height: 30px;
  float: left;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png) no-repeat;
  cursor: pointer;
}

.rate-ex1-cnt .rate-btn:hover,
.rate-ex1-cnt .rate-btn-hover,
.rate-ex1-cnt .rate-btn-active {
  background: url(https://dl.dropboxusercontent.com/u/683504/www.codepen.io/stars.png) no-repeat;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s
}

.rate-ex2-cnt {
  width: 150px;
  height: 30px;
  border: #e9e9e9 1px solid;
  background-color: #f6f6f6;
}

.rate-ex2-cnt .rate-btn {
  width: 30px;
  height: 30px;
  float: left;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png) no-repeat;
  cursor: pointer;
}

.rate-ex2-cnt .rate-btn:hover,
.rate-ex2-cnt .rate-btn-hover,
.rate-ex2-cnt .rate-btn-active {
  background: url(https://dl.dropboxusercontent.com/u/683504/www.codepen.io/stars.png) no-repeat;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
  -webkit-animation-duration: .75s;
  animation-duration: .75s
}

.rate-ex3-cnt {
  width: 150px;
  height: 30px;
  border: #e9e9e9 1px solid;
  background-color: #f6f6f6;
}

.rate-ex3-cnt .rate-btn {
  width: 30px;
  height: 30px;
  float: left;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png) no-repeat;
  cursor: pointer;
}

.rate-ex3-cnt .rate-btn:hover,
.rate-ex3-cnt .rate-btn-hover,
.rate-ex3-cnt .rate-btn-active {
  background: url(https://dl.dropboxusercontent.com/u/683504/www.codepen.io/stars.png) no-repeat;
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s
}

相关问题
最新问题