クリック機能とホバー機能

Question

ユーザーがサークル上を移動すると、その特定のサークルとその左の円が黄色で塗りつぶされ、ユーザーがサークルをクリックすると、その特定のサークルとその左のサークルが表示されます緑がいっぱい。

最後にアクティブなサークルは、ホバー効果機能にロールバックして黄色で塗りつぶす必要があります。ユーザーが再びクリックしたくない場合は、以前に緑色で塗りつぶされたサークルを保持する必要があります。

私は以前に再びユーザー初めて率4とは、その後2を評価するために考えていると第二の円の上に置いたときに、今の問題は、ユーザーが再び置いたときにそれに優先順位を与えることをrating-hoverクラスの!importantを与えてくれました満ちた4つ星がまだ見えますが、私はそれを見たくありません。ユーザは、再びクリックしたときに新たに評価する気分になっていなければなりません。そして、私は!importantを使用したくありません。その他のソリューションは大歓迎です！

$(function() { 
 
    $('.rating-circle').hover(function() { 
 
     $(this).prevAll().addBack().addClass('rating-hover'); 
 
    }, 
 
    function() { 
 
     $(this).prevAll().addBack().removeClass('rating-hover'); 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $('.rating-circle').click(function() { 
 
    $('.rating-circle').removeClass('rating-chosen'); 
 
    $(this).prevAll().addBack().addClass('rating-chosen'); 
 
    }); 
 
});

.rating-circle { 
 
    height: 2em; 
 
    width: 2em; 
 
    border: .1em solid black; 
 
    border-radius: 1.1em; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: .1em; 
 
} 
 
.rating-hover { 
 
    background-color: yellow !important; 
 
} 
 
.rating-chosen { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="rating-container"> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
</div>

Answer 1

あなたはちょうどそれが優先されますよう.rating-chosenことをより具体的に.rating-hoverクラスを設定する必要が必要な効果を達成するために。これを行うために、要素セレクタ、特にdivの接頭辞を付けました。 clickイベントが発生すると、.rating-hoverクラスも削除する必要があります。

最後に、すべてのコードを単一のdocument.readyハンドラに入れることもできます。追加してみてくださいレーティング・ホバークラスに重要な

$(function() { 
 
    $('.rating-circle').hover(function() { 
 
    $(this).prevAll().addBack().addClass('rating-hover'); 
 
    }, function() { 
 
    $(this).prevAll().addBack().removeClass('rating-hover'); 
 
    }); 
 

 
    $('.rating-circle').click(function() { 
 
    $('.rating-circle').removeClass('rating-chosen rating-hover'); 
 
    $(this).prevAll().addBack().addClass('rating-chosen'); 
 
    }); 
 
});

.rating-circle { 
 
    height: 2em; 
 
    width: 2em; 
 
    border: .1em solid black; 
 
    border-radius: 1.1em; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: .1em; 
 
} 
 
div.rating-hover { 
 
    background-color: yellow; 
 
} 
 
.rating-chosen { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="rating-container"> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
</div>

Answer 2

：！これを試してみてください。ホバーは正しく動作していますが、あなたのスタイルで最後に選択されたレーティングのために、！重要なものが必要になります。

$(function() { 
 
    $('.rating-circle').hover(function() { 
 
     $(this).prevAll().addBack().addClass('rating-hover'); 
 
    }, 
 
    function() { 
 
     $(this).prevAll().addBack().removeClass('rating-hover'); 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $('.rating-circle').click(function() { 
 
    $('.rating-circle').removeClass('rating-chosen'); 
 
    $(this).prevAll().addBack().addClass('rating-chosen'); 
 
    }); 
 
});

.rating-circle { 
 
    height: 2em; 
 
    width: 2em; 
 
    border: .1em solid black; 
 
    border-radius: 1.1em; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: .1em; 
 
} 
 
.rating-hover { 
 
    background-color: yellow !important; 
 
} 
 
.rating-chosen { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="rating-container"> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
    <div class="rating-circle"></div> 
 
</div>