attr（'value'）返回undefined

Question

我試圖獲得5星評級的價值屬性，但是當我將鼠標懸停在它上面時，我得到了未定義。 當我有attr（'class'）而不是attr（'value'）但是它有效。 我想知道是否有人可以幫助我。 謝謝。

 <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>

這是javascript

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

    });

Answer 1

更改事件監聽器當前警告.rating input上的任何鼠標懸停事件，如果您只對輸入標記div感興趣，那么您希望.rating input不是.rating

選項1：

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

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

選項2：

另一種選擇是使用jQuery .is這可以讓你測試設置元素的內容，你可以保持您原有的事件偵聽器的.rating標簽。

 $( ".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/

希望有所幫助。

Answer 2

您已向錯誤的元素添加偵聽器。 類“評級”是指字段集不是“輸入”。

可能的更正是在每個輸入中添加'class =“rating”'，如下所示：

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

Answer 3

有人發布了解決方案並且有效。 但是由於某種原因它被刪除了所以我會發布解決方案的內容。

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


});