HTML,CSS,JavaScriptを用いて星マークと連動したレビュー機能を作りたいと考えています。

解決したいこと

HTML,CSS,JavaScriptを用いて星マークと連動したレビュー機能を作りたいと考えています。
星マークの動作の部分で、クリックした星マークとその左の星マークを塗りつぶした星にして、右側の星マークを中身が空白の星マークにしたいのですが、以下に掲載するプログラムを実行したところ、全く逆の現象が起きています。（クリックした星マークとその右側の星マークが塗りつぶされてしまう）

どのように解決したらいいでしょうか。
※記載はしていないですが、JQueryは読み込んでいます。

該当するソースコード

HTML
1<div class="star-rating">
2    <input type="radio" name="rating" value="1" id="star1">
3    <label for="star1"></label>
4    <input type="radio" name="rating" value="2" id="star2">
5    <label for="star2"></label>
6    <input type="radio" name="rating" value="3" id="star3">
7    <label for="star3"></label>
8    <input type="radio" name="rating" value="4" id="star4">
9    <label for="star4"></label>
10    <input type="radio" name="rating" value="5" id="star5">
11    <label for="star5"></label>
12</div>

CSS
1/* star rating */
2.star-rating {
3    width: 100%;
4    display: flex;
5    justify-content: center;
6    align-items: center;
7    margin-bottom: 20px;
8    font-size: 1.3rem;
9}
10
11.star-rating input {
12    display: none;
13}
14
15.star-rating label {
16    display: inline-block;
17    width: 50px;
18    height: 50px;
19    margin: 0 5px 0 0;
20    background: url(../img/icon/no\ fill\ star.png) 0 0 no-repeat;
21    background-size: contain;
22    cursor: pointer;
23}
24
25.star-rating label:hover,
26.star-rating label:hover ~ label,
27.star-rating input:checked ~ label {
28    background: url(../img/icon/fill\ star.png) 0 0 no-repeat;
29    background-size: contain;
30}
31

javascript
1<script>
2  $('.star-rating input').click(function(){
3    $('.star-rating input').removeClass('checked');
4    $(this).addClass('checked');
5    var starNum = $(this).val();
6    $('.star-rating label').removeClass('full');
7    for(var i=1; i<=starNum; i++){
8      $('.star-rating label:nth-child('+i+')').addClass('full');
9    }
10  });
11</script>

GKL

2023/02/18 06:23 編集

あなたが提出したJavaScriptとHTMLがどのように関係しているか不明です。HTML全文を提出して下さい。 > ※記載はしていないですが、JQueryは読み込んでいます。どのようにjQueryを読み込んでいるのですか？また、あなたが利用しているjQueryのバージョンがわかりません。 start.pngはどのような画像ですか？回答者にわかるようにアップロードして下さい。

programing0613

2023/02/18 06:34

ご回答ありがとうございます。HTML部分は以下のプログラムのようになっております。 JQueryは以下のように3.6.3を読み込んでおります。画像は、fill star.pngが黄色い星マークの画像で、no fill star.pngが真ん中が空白になっている星マークの画像です。こちらで何かわかりますでしょうか。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>アップロードフォーム</title> <link rel="stylesheet" href="css/product.css"> <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script> </head> <body> <header class="header"> <div class="logo"> <img src="./img/icon/crest-logo.png" alt="NoImage" width="90%"> </div> <nav> <ul class="nav-list"> <li><a href="shopping.php">ホーム</a> <div class="sub-menu"> <ul> <li><a href="#">事業内容</a></li> <li><a href="#">会社情報</a></li> <li><a href="#">実績</a></li> <li><a href="#">社訓</a></li> </ul> </div> </li> <li><a href="#">製品</a> <div class="sub-menu"> <ul> <li><a href="#">SOFA</a></li> <li><a href="#">CHAIR</a></li> <li><a href="#">BED</a></li> <li><a href="#">TABLE</a></li> </ul> </div> </li> <li><a href="#">その他</a> <div class="sub-menu"> <ul> <li><a href="#">お問い合わせ</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">関連会社</a></li> <li><a href="#">アクセス</a></li> </ul> </div> </li> </li> </ul> </nav> <div class="search-box"> <form class="search-form" action="search.php" method="POST"> <input name="word" type="text" placeholder="検索ワード" > <button type="submit"> <img class="search-img" src="./img/icon/search.png" alt="NoImage"> </button> </form> </div> <div class="icon"> <div class="cart"> <a href="./cart.php"> <img src="./img/icon/cart.png" alt="NoImage"> <h4 class="pro-num"> <?php echo count($_SESSION["cart"]); ?> </h4> </a> </div> <div class="login"> <a href="./login/login_form.php"> <img src="./img/icon/user.png" alt="NoImage"> </a> </div> </div> </header> <div class="white"> <p>余白</p> </div> <div class="log-box"> <p>ようこそ、<?php echo h($_SESSION['login_user']['name']) ?>さん</p> <form action="./login/logout.php" method ="POST"> <input type="submit" name="logout" value="ログアウトする"> </form> </div> <div class="page-title"> <h1> RARGO ONLINE SHOP </h1> </div> <div class="container"> <h1 class="head">< 商品情報 ></h1> <div class="main"> <div class="img-container"> <img class="img" src="<?php echo "{$product[$i]['file_path']}"; ?>" alt="NoImage"> </div> <div class="main-info"> <div class="product-name"> <p><?php echo h("{$product[$i]['product_name']}"); ?></p> </div> <div class="product-price"> <h3>価格：</h3> <p><?php echo "¥" . number_format(h("{$product[$i]['price']}")) . "円"; ?></p> </div> <div class="product-price"> <h3>商品カテゴリ：</h3> <p><?php echo (h("{$product[$i]['category']}")); ?></p> </div> <div class="button"> <form action="cart.php" class="mt-3" method="POST"> <button type="submit" class="cart-btn">カゴに入れる</button> <input type="hidden" name ="product_name" value="<?php echo $product[$i]['product_name'] ?>"> <input type="hidden" name ="category" value="<?php echo $product[$i]['category'] ?>"> <input type="hidden" name="csrf_token" value="<?php echo h(setToken()); ?>"> <select name="num"> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> </select> </form> <button class="reg-btn">レジに進む</button> </div> </div> </div> <div class="des"> <p><?php echo h("{$product[$i]['description']}"); ?></p> </div> <div class="wrapper"> <div class="review-container"> <h3>＜商品レビュー＞</h3> <?php if(count($reviews) != 0){ ?> <?php for($r = 0; $r < count($reviews); $r++){ ?> <div class="review-box"> <div class="review-user"> <img src="./img/icon/user 3.png" alt="NoImage" class="review-img"> <div class="review-name"> <p>ユーザー名：</p> <p><?php echo $reviews[$r]["review_user_name"] ?></p> </div> </div> <div class="review-comment"> <p><?php echo $reviews[$r]["review_comment"] ?></p> </div> <div class="star-box"> <img src="./img/icon/fill star.png" alt="NoImage"> <img src="./img/icon/fill star.png" alt="NoImage"> <img src="./img/icon/fill star.png" alt="NoImage"> <img src="./img/icon/fill star.png" alt="NoImage"> <img src="./img/icon/fill star.png" alt="NoImage"> </div> <div class="review-data"> <p>投稿日時：<?php echo $reviews[$r]["review_data"] ?></p> </div> <a href="./delete_review.php?review_product_name=<?php echo $reviews[$r]["review_product_name"] ?>&review_comment=<?php echo $reviews[$r]["review_comment"] ?>&review_user_name=<?php echo $reviews[$r]["review_user_name"] ?>">口コミを削除する</a> </div> <?php } ?> <?php }else{ ?> <div class="no-review"> <p>レビューはありません。</p> </div> <?php } ?> </div> </div> <div class="wrapper"> <div class="review-container"> <h3>口コミを投稿する</h3> <form action="add_review.php" method="POST"> <textarea name="add_review" class="form-control" placeholder="口コミを記入してください。"></textarea> <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> <input type="hidden" name="id" value="<?php echo h($product[$i]['id']); ?>"> <input type="hidden" name="product_name" value="<?php echo h($product[$i]['product_name']); ?>"> <input type="hidden" name="product_category" value="<?php echo h($product[$i]['category']); ?>"> <input type="hidden" name="csrf_token" value="<?php echo h(setToken()); ?>"> <button type="submit" class="btn btn-default">投稿する</button> </form> </div> </div> <div class="page-link"> <a href="shopping.php">買い物を続ける</a> </div> </div>  <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> </body> </html>

m.ts10806

2023/02/18 07:34

質問は編集できますので

行動規範の内容に同意します

回答2件

ベストアンサー

ラジオボタンを使うならJSは不要でCSSのみで画像を変更、JSでするならラジオボタンはなしで必要に応じてクラスを追加/削除するという方針でいくべきでしょう。
２つの方法をごちゃまぜにしているのが問題を複雑にしてます。

とりあえず、JS不要の方針でいくなら、下記でどうでしょう。

html
1<div class="star-rating">
2    <input type="radio" name="rating" value="0" id="star0"  checked>
3    <label for="star1"></label>
4    <input type="radio" name="rating" value="1" id="star1">
5    <label for="star2"></label>
6    <input type="radio" name="rating" value="2" id="star2">
7    <label for="star3"></label>
8    <input type="radio" name="rating" value="3" id="star3">
9    <label for="star4"></label>
10    <input type="radio" name="rating" value="4" id="star4">
11    <label for="star5"></label>
12    <input type="radio" name="rating" value="5" id="star5">
13</div>

css
1/* star rating */
2.star-rating {
3    width: 100%;
4    display: flex;
5    justify-content: center;
6    align-items: center;
7    margin-bottom: 20px;
8    font-size: 1.3rem;
9}
10
11.star-rating input {
12    display: none;
13}
14.star-rating label {
15    display: inline-block;
16    width: 50px;
17    height: 50px;
18    margin: 0 5px 0 0;
19    background: url(../img/icon/fill\ star.png) 0 0 no-repeat;
20    background-size: contain;
21    cursor: pointer;
22}
23.star-rating input:checked ~ label
24{
25    background: url(../img/icon/no\ fill\ star.png) 0 0 no-repeat;
26}

hover に関しての処理はちょっと難しそうなので保留。

投稿2023/02/18 07:45

hatena19

総合スコア33715

programing0613

2023/02/18 07:58

ご回答ありがとうございます。書いていただいたプログラムを実行してみたところ、思っていた動作を実現することができました。ありがとうございました。

行動規範の内容に同意します

$('.star-rating input').removeClass('checked');
$(this).addClass('checked');

3行目、4行目で処理上書きしている様に思いました。

以下の様に、クラスを持ってるとき持っていないときで処理を
分けてみるのはどうでしょうか。
if($('.star-rating input').hasClass("checked")){
}else{
}

投稿2023/02/18 06:33

magarugi

総合スコア17

programing0613

2023/02/18 06:45

ご回答ありがとうございます。具体的にどのようなプログラムで実装できるか教えていただけないでしょうか。

magarugi

2023/02/18 07:07 編集

こんな感じでどうでしょうか。 $('.star-rating input').click(function(){ if($('.star-rating input').hasClass("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'); }else{ // チェックを外したいときの処理 $(this).removeClass('checked'); } }); クラス「full」につけたい挙動がわからなかったので、もしここまでのヒントが参考になったらこの処理を元に色々試してみると道が開けると思います。

programing0613

2023/02/18 07:51

ありがとうございます。参考にさせていただきます。

行動規範の内容に同意します

あなたの回答