Attr ('Wert') gibt zurück undefined

Question

Ich versuche, das Wertattribut einer 5-Sterne-Bewertung zu bekommen, aber wenn ich darüber schwebe, werde ich undefiniert. Wenn ich attr ('Klasse') anstelle von attr ('Wert') habe, funktioniert es. Ich habe mich gefragt, ob mir jemand helfen könnte. Vielen Dank.

<fieldset class="rating"> 
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label> 
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label> 
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label> 
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label> 
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label> 
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label> 
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label> 
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label> 
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label> 
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label> 

</fieldset> 

Hier ist die Javascript

$(document).on('mouseover', '.rating', function(e) { 
     var c = $(e.target).attr('value') 
     alert(c); 

    }); 

Answer 1

Jemand die Lösung gepostet und es funktionierte. Es wurde jedoch aus irgendeinem Grund gelöscht, also poste ich, was die Lösung war.

$('.rating').on('mouseover', 'label', function(e) { 
    console.log($(this).prev().val()); 


}); 

Answer 2

Ändern der Ereignis-Listener es aktuell ist jede Maus über Ereignis auf dem fieldset Alarmierung, wenn Sie daran interessiert sind nur in der Input-Tag divs sind dann Sie .rating input nicht .rating

Option 1 wollen:

$(document).on('mouseover', '.rating input', function(e) { 
     var c = $(e.target).attr('value') 
     console.log(c); 
     alert(c); 
    }); 

https://jsfiddle.net/uexycqxo/2/

Option 2:

Eine weitere Option ist mit dem JQuery .is dies den Inhalt des Elements testen kann eingestellt und Sie können Ihren ursprünglichen Ereignis-Listener auf dem .rating Tag zu halten.

$(".rating").on('mouseover', function(event) { 
    var target = $(event.target); 
    if (target.is("input")) { 
     var value = target.attr('value') 
     alert(value); 
    } 
}); 

https://jsfiddle.net/uexycqxo/3/

Hoffnung, das hilft.

Answer 3

Sie haben dem falschen Element einen Listener hinzugefügt. Class "Rating" bezieht sich auf fieldset nicht zu "Eingabe".

Eine mögliche Korrektur ist das Hinzufügen von ‚class =‚rating‘‘ jedem Eingang wie folgt:

$(document).on('mouseover', '.rating', function(e) { 
 
    var c = $(e.target).attr('value') 
 
    alert(c); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset> 
 
    <input class="rating" type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label> 
 
    <input class="rating" type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label> 
 
    <input class="rating" type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label> 
 
    <input class="rating" type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label> 
 
    <input class="rating" type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label> 
 
    <input class="rating" type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label> 
 
    <input class="rating" type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label> 
 
    <input class="rating" type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label> 
 
    <input class="rating" type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label> 
 
    <input class="rating" type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label> 
 
</fieldset>