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.

Beispiel mit JS

$('.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.

JSFiddle

$('.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

DEMO

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