文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >当单击一个图像，然后单击另一个图像时，当第一个图像被单击时，将不会显示第一个图像。

问当单击一个图像，然后单击另一个图像时，当第一个图像被单击时，将不会显示第一个图像。
EN

Stack Overflow用户
提问于 2015-12-10 07:54:56
回答 2查看 58关注 0票数 2

现在，我有一个新的问题，当我点击所需的图像评级，然后我点击另一个期望的评级，然后我决定悬停在我点击的第一个评级，现在，我第一次点击的明星图像评级将不会显示。

例如，假设我单击了3星评等图像，然后我单击了1星评等图像，然后我将悬停回3星评等图像，当图像在悬停时不会出现。

HTML

代码语言：javascript
复制
<form method="" action="" id="rating-form">
  <fieldset>
    <ol>
      <li>
        <ul class="rating-pick notrated">
          <li id="rate-1" data-desc="Bad">
            <label for="rating-1">
              <input type="radio" value="1" name="rating" id="rating-1" />1 star</label>
          </li>
          <li id="rate-2" data-desc="Good">
            <label for="rating-2">
              <input type="radio" value="2" name="rating" id="rating-2" />2 stars</label>
          </li>
          <li id="rate-3" data-desc="Great">
            <label for="rating-3">
              <input type="radio" value="3" name="rating" id="rating-3" />3 stars</label>
          </li>
          <li id="rate-4" data-desc="Better">
            <label for="rating-4">
              <input type="radio" value="4" name="rating" id="rating-4" />4 stars</label>
          </li>
          <li id="rate-5" data-desc="Best">
            <label for="rating-5">
              <input type="radio" value="5" name="rating" id="rating-5" />5 stars</label>
          </li>
        </ul>
        <div class="rate" data-desc="Rate this product">Rate this product</div>
      </li>
    </ol>
  </fieldset>
</form>

Jquery

代码语言：javascript
复制
$(document).ready(function() {
  var rating;
  $('.rating-pick li')
    .on('mouseenter touchstart', function() {
      var classSuffix = $(this).find('input').attr('id').split('-')[1];
      $('.rating-pick').prevAll().addBack().addClass('rating-' + classSuffix);
      $('.rating-pick').nextAll().removeClass('notrated');
      $('.rate').text($(this).data('desc'));  
      rating = $('.rating-pick').attr('class').split(' ')[1];
      $('.rating-pick').removeClass(rating);
    })
    .on('mouseleave touchend', function() {
      var classSuffix = $(this).find('input').attr('id').split('-')[1];
      $('.rating-pick').prevAll().addBack().removeClass('rating-' + classSuffix);
      $('.rate').text($('.rate').attr('data-desc'));
      $('.rating-pick').addClass(rating);
    })
    .on('change click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      $('.rate').attr('data-desc', $(this).attr('data-desc'));
      var classSuffix = $(this).find('input').attr('id').split('-')[1];
      $('ul.rating-pick').removeClass().addClass('rating-pick rating-' + classSuffix);
      $(this).off('mouseenter touchstart mouseleave touchend');
    });
});

CSS

代码语言：javascript
复制
*{
  margin: 0;
  padding: 0;
  border: 0;
}

#rating-form ol li{
  list-style: none;
  width: 100%;
  float: left;
}

#rating-form label{
    display: inline-block;
    margin-bottom: 0.2em;
    font-weight: bold;
    width: 100%;
}

.rate{
    float: left;
    width: 100%;
    margin: -1.4em 0 1.8em 0;
}

.rating-pick{
    width: 150px;
    height: 30px;
    float: left;
    margin-bottom: 1.8em;
}

.notrated{
    background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
    background-repeat: repeat-x;
    background-position: 0px 0px;
}


.rating-1{
    background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
    background-repeat: repeat-x;
    background-position: 0px -60px;
}

.rating-2{
    background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
    background-repeat: repeat-x;
    background-position: 0px -120px;
}

.rating-3{
    background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
    background-repeat: repeat-x;
    background-position: 0px -180px;
}

.rating-4{
    background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
    background-repeat: repeat-x;
    background-position: 0px -240px;
}

.rating-5{
    background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
    background-repeat: repeat-x;
    background-position: 0px -300px;
}

.rating-pick input[type="radio"], .rating-pick label{
    height: 0 !important;
    display: none !important;
}

.rating-pick li{
    float: left !important;
    width: 30px !important;
    height: 30px !important; 
    display: block !important;
    list-style-type: none !important;
    cursor: pointer !important;
}

下面是在操作中的代码http://jsfiddle.net/v6kythze/

jquery
html
css
javascript
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-12-10 10:02:35

这是更新的代码：

代码语言：javascript
复制
$(document).ready(function() {
      var rating = "notrated";
      $('.rating-pick li')
        .on('mouseenter touchstart', function() {
          $(this).parent().removeClass($(this).parent().attr("class").split(" ")[1]);
          var classSuffix = $(this).attr('id').split('-')[1];
          $('.rating-pick').addClass('rating-' + classSuffix);
          $('.rate').text($(this).data('desc'));
        })
        .on('mouseleave touchend', function() {
          var classSuffix = $(this).attr('id').split('-')[1];
          $('.rate').text($('.rate').attr('data-desc'));
          $('.rating-pick').attr("class", "").addClass("rating-pick " + rating)
        })
        .on('change click', function(e) {
          e.preventDefault();
          e.stopPropagation();
          $('.rate').attr('data-desc', $(this).attr('data-desc'));
          rating = "rating-" + $(this).attr("id").split("-")[1];
          $('.rating-pick').removeClass("notrated").addClass(rating);
        });
    });

demo

代码中的问题是由于这些事件正在关闭元素。

我删除了这段代码并实现了一项工作。

票数 1
EN

Stack Overflow用户

发布于 2015-12-10 08:49:51

伙计，我今天很懒得写javascript，但是你的问题一次又一次地出现了好几个小时，所以在这里，给你一个有用的版本：

​

代码语言：javascript
复制
$(document).ready(function() {
	  var rating;
	  $('.rating-pick li')
	    .on('mouseenter touchstart', function() {
	      var classSuffix = $(this).find('input').attr('id').split('-')[1];
	      $('.rating-pick').addClass('rating-hover-' + classSuffix);
	      $('.rate').text($(this).data('desc'));
	    })
	    .on('mouseleave touchend', function() {
	      var classSuffix = $(this).find('input').attr('id').split('-')[1];
	      $('.rating-pick').removeClass('rating-hover-' + classSuffix);
	      $('.rate').text($('.rate').attr('data-desc'));

	      $('.rating-pick').addClass(rating);
	    })
	    .on('change click', function(e) {
	      $('.rate').attr('data-desc', $(this).attr('data-desc'));
	      var classSuffix = $(this).find('input').attr('id').split('-')[1];
	      $('ul.rating-pick').removeClass().addClass('rating-pick rating-' + classSuffix);
	    });
	});
代码语言：javascript
复制
* {
  margin: 0;
  padding: 0;
  border: 0;
}
#rating-form ol li {
  list-style: none;
  float: left;
  width: 100%;
}
#rating-form label {
  display: inline-block;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
}

#rating-form label input{
  display: none;
}

.rate {
  float: left;
  width: 100%;
  margin: -1.4em 0 1.8em 0;
}
.rating-pick {
  width: 150px;
  height: 30px;
  float: left;
  margin-bottom: 1.8em;
  
  background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
  background-repeat: norepeat;
  background-position: 0px 0px;
}

.rating-1 {
  background-position: 0px -60px;
}
.rating-2 {
  background-position: 0px -120px;
}
.rating-3 {
  background-position: 0px -180px;
}
.rating-4 {
  background-position: 0px -240px;
}
.rating-5 {
  background-position: 0px -300px;
}

.notrated {
  background-position: 0px 0px;
}
.rating-hover-1 {
  background-position: 0px -60px;
}
.rating-hover-2 {
  background-position: 0px -120px;
}
.rating-hover-3 {
  background-position: 0px -180px;
}
.rating-hover-4 {
  background-position: 0px -240px;
}
.rating-hover-5 {
  background-position: 0px -300px;
}

#rating-form .rating-pick li{
  position: relative;
  width: 30px;
  height: 30px;
  display: block;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="" action="" id="rating-form">
  <fieldset>
    <ol>
      <li>
        <ul class="rating-pick">
          <li id="rate-1" data-desc="Bad">
            <label for="rating-1">
              <input type="radio" value="1" name="rating" id="rating-1" />1 star</label>
          </li>
          <li id="rate-2" data-desc="Good">
            <label for="rating-2">
              <input type="radio" value="2" name="rating" id="rating-2" />2 stars</label>
          </li>
          <li id="rate-3" data-desc="Great">
            <label for="rating-3">
              <input type="radio" value="3" name="rating" id="rating-3" />3 stars</label>
          </li>
          <li id="rate-4" data-desc="Better">
            <label for="rating-4">
              <input type="radio" value="4" name="rating" id="rating-4" />4 stars</label>
          </li>
          <li id="rate-5" data-desc="Best">
            <label for="rating-5">
              <input type="radio" value="5" name="rating" id="rating-5" />5 stars</label>
          </li>
        </ul>
        <div class="rate" data-desc="Rate this product">Rate this product</div>
      </li>
    </ol>
  </fieldset>
</form>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/34196426

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档