使用 jQuery 获取悬停标签时相关输入的值

Question

我正在尝试获取鼠标悬停在标签上时的输入值。我该如何处理？

HTML

       <label class="target">
         <input type="radio" name="hello" value="hi" class="greeting">
         <span>Hi</span>
       </label>
      <label class="target">
         <input type="radio" name="hello" value="hello" class="greeting">
         <span>Hello</span>
       </label>

单选按钮被隐藏，因此当鼠标悬停在标签上时，它悬停在 span 元素上。

我只得到第一个元素，'hi' in jQuery。

$('.target').hover(function() {
   alert('hovering: ' + $('.greeting').val());
})

我想显示每个值。

Answer 1

使用事件处理程序并在上下文中获取输入元素。

$('.target').hover(function() {
  console.log($('input', this).val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="target">
  <input type="radio" name="hello" value="hi" class="greeting">
  <span>Hi</span>
</label>
<label class="target">
  <input type="radio" name="hello" value="hello" class="greeting">
  <span>Hello</span>
</label>

Answer 2

$('label').hover(function(){
alert($(this).find('input').val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="target">
  <input type="radio" name="hello" value="hi" class="greeting">
  <span>Hi</span>
</label>
<label class="target">
  <input type="radio" name="hello" value="hello" class="greeting">
  <span>Hello</span>
</label>

使用.find()

Answer 3

内部悬停函数 $('.greeting').val() 将获取第一个输入框的值，无论悬停在任何标签上。所以要获取受尊重的输入的值必须使用 $(this).find('.greeting').val()

$('.target').hover(function() {
   alert('hovering: ' + $(this).find('.greeting').val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="target">
  <input type="radio" name="hello" value="hi" class="greeting">
  <span>Hi</span>
</label>
<label class="target">
  <input type="radio" name="hello" value="hello" class="greeting">
  <span>Hello</span>
</label>

Answer 4

你可以这样试试：

$(document).ready(function() {
 $("label").on("mouseover", function(e) {
  alert($(this).find("input").val());
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="target">
     <input type="radio" name="hello" value="hi" class="greeting">
     <span>Hi</span>
</label>
<label class="target">
     <input type="radio" name="hello" value="hello" class="greeting">
     <span>Hello</span>
</label>

使用 jQuery 获取悬停标签时相关输入的值

Get the value of the related input on hovering a label using jQuery

jquery

hover

radio