HTML,CSS,JavaScriptを用いて星マークと連動したレビュー機能を作りたいのですが、、
解決したいこと
HTML,CSS,JavaScriptを用いて星マークと連動したレビュー機能を作りたいと考えています。
星マークの動作の部分で、クリックした星マークとその左の星マークを塗りつぶした星にして、右側の星マークを中身が空白の星マークにしたいのですが、以下に掲載するプログラムを実行したところ、全く逆の現象が起きています。（クリックした星マークとその右側の星マークが塗りつぶされてしまう）
どのように解決したらいいでしょうか。
※記載はしていないですが、JQueryは読み込んでいます。
該当するソースコード
<div class="star-rating">
<input type="radio" name="rating" value="1" id="star1">
<label for="star1"></label>
<input type="radio" name="rating" value="2" id="star2">
<label for="star2"></label>
<input type="radio" name="rating" value="3" id="star3">
<label for="star3"></label>
<input type="radio" name="rating" value="4" id="star4">
<label for="star4"></label>
<input type="radio" name="rating" value="5" id="star5">
<label for="star5"></label>
</div>
/* star rating */
.star-rating {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
font-size: 1.3rem;
}
.star-rating input {
display: none;
}
.star-rating label {
display: inline-block;
width: 50px;
height: 50px;
margin: 0 5px 0 0;
background: url(../img/icon/no\ fill\ star.png) 0 0 no-repeat;
background-size: contain;
cursor: pointer;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
background: url(../img/icon/fill\ star.png) 0 0 no-repeat;
background-size: contain;
}
<script>
$('.star-rating input').click(function(){
$('.star-rating input').removeClass('checked');
$(this).addClass('checked');
var starNum = $(this).val();
$('.star-rating label').removeClass('full');
for(var i=1; i<=starNum; i++){
$('.star-rating label:nth-child('+i+')').addClass('full');
}
});
</script>
0
