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元素上。

我只是第一个元素，＆＃39; hi＆＃39;在jQuery中。

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

我想显示每个值。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

使用.find()

Answer 3

内部悬停功能$('.greeting').val()将获取第一个输入框的值，而不管是否悬停在任何标签上。因此，要获取受尊重输入的值，必须使用$(this).find('.greeting').val()

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您可以尝试这样：

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: