Ich versuche, eine CSS / jQuery-basierte Bewertung vorzunehmen. Folgendes habe ich bisher: JSFiddle.
<div class="rating">
<div class="active" style="width: 70%"></div>
</div>
Ich muss den Prozentsatz von .rating > .active ändern, wenn sich der Mauszeiger auf dem übergeordneten Element befindet (.rating). Zum Beispiel bewege ich meine Maus 50% nach rechts, damit .active eine Breite von 50% hat.
$('.rating').on('mouseover', function(){
var position = $(this).position();
$(this).find('.active').css('width', position.left);
});
Aber es gibt mir immer "8" zurück. Ich weiß also nicht warum.
1
Arnas Pečelis
13 Aug. 2015 im 19:57
3 Antworten
Beste Antwort
http://jsfiddle.net/km2p1ebb/3/
$(".rating").mousemove(function(e) {
var gLeft = $(this).offset().left,
pX = e.pageX;
$(this).find('.active').width(pX - gLeft);
});
1
Mike
13 Aug. 2015 im 17:12
Sie konnten das Rad nicht neu erfinden und das vorhandene jQuery-Plugin verwenden, z. B. jQuery Raty.
$('.js-raty').raty({
path: 'http://wbotelhos.com/raty/demo/images/',
score: 4,
click: function(score) {
$('.js-points').text(score * 2);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://wbotelhos.com/raty/lib/jquery.raty.js"></script>
<link href="http://wbotelhos.com/raty/lib/jquery.raty.css" rel="stylesheet"/>
<div class="js-raty"></div>
<div>Points: <span class="js-points">8</span></div>
0
sergdenisov
13 Aug. 2015 im 17:39
mousemove Ereignis hinzugefügt. position.left bedeutet die Position des Div. Wenn Sie die Koordinatenposition der Maus x von der linken Position abziehen, erhalten Sie den richtigen Wert.
$('.rating').on('mouseover mousemove', function(e){
var position = $(this).position();
$(this).find('.active').css('width', e.pageX - position.left);
});
$('.rating').on('mouseout', function (e) {
var position = $(this).position();
$(this).find('.active').css('width', '70%'); //reset to initial value if not clicked.
});
2
RRK
13 Aug. 2015 im 17:23