Получите значение соответствующего ввода при наведении метки с помощью 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>