主页 / 问题 / 793840
Accepted
YourDeveloper
Asked:2020-03-05 18:21:34 +0000 UTC2020-03-05 18:21:34 +0000 UTC

星级评定。如何修复/简化？

  • 772

我决定尝试在 jquery 中编写星级评分并有点困惑，下面是其中有一个很好的错误的代码，如果最初 3 颗星处于活动状态，那么当您将鼠标悬停在第 4 颗星上时，它和之前的变为活动状态，这应该只在您单击而不是悬停时发生。+ 我的代码对于这样的任务来说可能太大了，一切都可以简化，但是唉，我不明白怎么做。

PS纯js中的答案也可以工作:)

var cStars = function(NowPos) {
	if(NowPos.index() == 0) {
  	// У всех убираем active
  	$('.stars .star').removeClass('active');
  	for(var i = 0; 1 > i; i++) {
    	$('.stars .star').eq(i).toggleClass('active');
    }
  }
  if(NowPos.index() == 1) {
  	// У всех убираем active
  	$('.stars .star').removeClass('active');
  	for(var i = 0; 2 > i; i++) {
    	$('.stars .star').eq(i).toggleClass('active');
    }
  }
  if(NowPos.index() == 2) {
  	// У всех убираем active
  	$('.stars .star').removeClass('active');
  	for(var i = 0; 3 > i; i++) {
    	$('.stars .star').eq(i).toggleClass('active');
    }
  }
  if(NowPos.index() == 3) {
  	// У всех убираем active
  	$('.stars .star').removeClass('active');
  	for(var i = 0; 4 > i; i++) {
    	$('.stars .star').eq(i).toggleClass('active');
    }
  }
  if(NowPos.index() == 4) {
  	// У всех убираем active
  	$('.stars .star').removeClass('active');
  	for(var i = 0; 5 > i; i++) {
    	$('.stars .star').eq(i).toggleClass('active');
    }
  }
}

// При наведении
$('.stars .star').hover(function() {
	var NowPos = $(this);
	cStars(NowPos);
});

// При клике
$('.stars .star').click(function() {
	var NowPos = $(this);
	cStars(NowPos);
});



  
.stars {
  font-size: 0px;
}

.star {
  display: inline-block;
  background: green;
  transition: all .5s ease;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.star.active {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stars">
  <span class="star active"></span>
  <span class="star active"></span>
  <span class="star active"></span>
  <span class="star"></span>
  <span class="star"></span>
</div>

javascript

3 个回答

  1. 好吧，如果您缩短代码，它将如下所示：

    var cStars = function(NowPos) {
$('.stars .star').removeClass('active');
for(var i = 0; NowPos.index()+1 > i; i++)
    $('.stars .star').eq(i).toggleClass('active');
}

// При наведении
$('.stars .star').hover(function() {
var NowPos = $(this);
cStars(NowPos);
});

// При клике
$('.stars .star').click(function() {
var NowPos = $(this);
cStars(NowPos);
});
    • 2
  2. Best Answer

    将变量添加到存储活动元素数量的代码中。它在点击时更新，当焦点丢失时，调用一个函数，将所有元素重新绘制为所需的值。

    var cStars = function(nowPos) {
  // У всех убираем active
  $('.stars .star').removeClass('active');
  for (var i = 0; nowPos + 1 > i; i++) {
    $('.stars .star').eq(i).toggleClass('active');
  }
}

//переменная содержит количество активных звезд
var starsCount = $('.star.active').length;

// При наведении
$('.stars .star').hover(function() {
  cStars($(this).index());
});

// При клике
$('.stars .star').click(function() {
  cStars($(this).index());
  //меняем количество по клику
  starsCount = $('.star.active').length;
});

$('.stars .star').on('mouseleave', function() {
  cStars(+starsCount - 1);
});
    .stars {
  font-size: 0px;
}

.star {
  display: inline-block;
  background: green;
  transition: all .5s ease;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.star.active {
  background: blue;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stars">
  <span class="star active"></span>
  <span class="star active"></span>
  <span class="star active"></span>
  <span class="star"></span>
  <span class="star"></span>
</div>

    附言

    1. NowPos最好将变量重命名为nowPos- JS 语言的变量名普遍接受的拼写
    2. 最好nowPos不要将对象传递给变量，而是传递索引，因为只使用它，并且变量的名称暗示位置编号。
    • 2

  3. 您甚至不需要这里的 javascript - 这是一个示例

    资源

    .rating {
  width: 200px;
  height: 40px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
}

.rating:not(:checked)>input {
  display: none;
}

.rating:not(:checked)>label {
  width: 40px;
  cursor: pointer;
  font-size: 40px;
  color: lightgrey;
  text-align: center;
  line-height: 1;
}

.rating:not(:checked)>label:before {
  content: '★';
}

.rating>input:checked~label {
  color: gold;
}

.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover~label {
  color: gold;
}

.rating>input:checked+label:hover,
.rating>input:checked+label:hover~label,
.rating>input:checked~label:hover,
.rating>input:checked~label:hover~label,
.rating>label:hover~input:checked~label {
  color: gold;
}
    <div class="rating">

  <input type="radio" id="star-1" name="rating" value="1">
  <label for="star-1" title="Оценка «1»"></label>

  <input type="radio" id="star-2" name="rating" value="2">
  <label for="star-2" title="Оценка «2»"></label>

  <input type="radio" id="star-3" name="rating" value="3">
  <label for="star-3" title="Оценка «3»"></label>

  <input type="radio" id="star-4" name="rating" value="4">
  <label for="star-4" title="Оценка «4»"></label>

  <input type="radio" id="star-5" name="rating" value="5">
  <label for="star-5" title="Оценка «5»"></label>

</div>

    • 0

相关问题