jqueryで私を訂正します

私は評価システムのCSS、HTML、およびjQueryコードを持っています。星の上にカーソルを置いて（色）うまくいきますが、星をクリックしてカーソルを削除すると同じです。私は星の上にマウスを置いてクリックして、色を変更する必要があります。私の英語のために申し訳ありませんが、私はあなたがそれを持っていると思います。jqueryで私を訂正します

1）（<body>）あなたがクリックされたdiv要素の親にcheckedクラスを適用していない：ここに私のコード

$(document).ready(function() { 
 
    $('.rating').click(function() { 
 
    $('.rating span').removeClass('checked'); 
 
    $(this).parent().addClass('checked'); 
 
    }); 
 
});

.rating { 
 
    unicode-bidi: bidi-override; 
 
    direction: rtl; 
 
} 
 

 
.rating>span { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 14px; 
 
    color: #c4b8b8; 
 
    font-size: 25px; 
 
} 
 

 
.rating>span:hover, 
 
.rating>span:hover~span { 
 
    color: transparent; 
 
} 
 

 
.rating>span:hover:before, 
 
.rating>span:hover~span:before { 
 
    content: "\2605"; 
 
    position: absolute; 
 
    color: gold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="rating"> 
 
    <span class="star1">★</span> 
 
    <span class="star2">★</span> 
 
    <span class="star3">★</span> 
 
    <span class="star4">★</span> 
 
    <span class="star5">★</span> 
 
</div>

出典

2017-12-25 Mr.Ra

、それはあなたを助け願っています：https://codepen.io/depy/pen/vEWWdw –

[OK]を、2 problenmsです個星。 divではなく各星をターゲットにするためにjQueryのクリックコードを調整する必要がありました。

2）checkedクラスを対象とするCSSはありません。私はオンホバーを扱う同じCSSコードにそれを加えました。

$(document).ready(function() { 
 
    $('.rating span').click(function() { 
 
    $('.checked').removeClass('checked'); 
 
    $(this).addClass('checked'); 
 
    }); 
 
});

.rating { 
 
    unicode-bidi: bidi-override; 
 
    direction: rtl; 
 
} 
 

 
.rating>span { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 14px; 
 
    color: #c4b8b8; 
 
    font-size: 25px; 
 
} 
 

 
.rating>span:hover, 
 
.rating>span:hover~span { 
 
    color: transparent; 
 
} 
 

 
.rating>span:hover:before, 
 
.rating>span:hover~span:before, 
 
.checked:before, 
 
.checked~span:before { 
 
    content: "\2605"; 
 
    position: absolute; 
 
    color: gold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="rating"> 
 
    <span class="star1">★</span> 
 
    <span class="star2">★</span> 
 
    <span class="star3">★</span> 
 
    <span class="star4">★</span> 
 
    <span class="star5">★</span> 
 
</div>

出典

2017-12-25 19:28:07 Draco18s

はあなたの助けをいただき、ありがとうございます。 –

あなたのクリック機能は、ユーザーがクリックした星を追跡していませんでした。あなたは、ほぼ同じデモを持っている。ここ

$(document).ready(function() { 
 
    $('.rating span').click(function() { 
 
    $('.rating span').removeClass('checked'); 
 
    $(this).addClass('checked'); 
 
    }); 
 
});

.rating { 
 
    unicode-bidi: bidi-override; 
 
    direction: rtl; 
 
} 
 

 
.rating>span { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 14px; 
 
    color: #c4b8b8; 
 
    font-size: 25px; 
 
} 
 

 
.rating>span:hover, 
 
.rating>span:hover~span { 
 
    color: transparent; 
 
} 
 

 
.rating>span:hover:before, 
 
.rating>span:hover~span:before, 
 
.rating>span.checked:before, 
 
.rating>span.checked~span:before { 
 
    content: "\2605"; 
 
    position: absolute; 
 
    color: gold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="rating"> 
 
    <span class="star1">★</span> 
 
    <span class="star2">★</span> 
 
    <span class="star3">★</span> 
 
    <span class="star4">★</span> 
 
    <span class="star5">★</span> 
 
</div>

出典

2017-12-25 19:31:11

ありがとう –

答えて

関連する問題