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