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

单选按钮被隐藏，所以当鼠标在标签，则盘旋跨度元件。

我只得到第一个元素，'嗨'在jQuery中。

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

我想显示每个值。

Answer 1

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

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

$('.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 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() { 
 
\t $("label").on("mouseover", function(e) { 
 
\t \t alert($(this).find("input").val()); 
 
\t }); 
 
});

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