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

更改事件监听器当前警告字段集上的任何鼠标悬停事件，如果您只对输入标记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

您已向错误的元素添加侦听器。等级＆＃34;等级＆＃34;是指字段集不是＆＃34;输入＆＃34;。

可能的更正是添加＆＃39; class =＆＃34; rating＆＃34;＆＃39;每个输入如下：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

有人发布了解决方案并且有效。但是由于某种原因它被删除了所以我会发布解决方案的内容。

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


});

attr（'value'）返回undefined

3 个答案: