当用户将鼠标悬停在 JQuery 中单选按钮的标签上时显示工具提示

Question

我的表单中有一些单选按钮：

<div id="data_id-block">
<dt id="data_id-label"><label class="required">Data</label></dt>
<dd id="data_id-element">
    <label for="data_id-1">
        <input type="radio" name="data_id" id="data_id-1" value="1" />test 1
    </label><br />
    <label for="data_id-2">
        <input type="radio" name="data_id" id="data_id-2" value="2" />test 2
    </label><br />
    <label for="data_id-4">
        <input type="radio" name="data_id" id="data_id-4" value="4" /> Test Data
    </label><br />
    <label for="data_id-5">
        <input type="radio" name="data_id" id="data_id-5" value="5" /> Second Test Data
    </label><br />
    <label for="data_id-6">
        <input type="radio" name="data_id" id="data_id-6" value="6" />Unassigned
    </label>
</dd>

我试图在用户将鼠标悬停在单选按钮的标签上时显示工具提示。我可以做到这一点，但我也想获取单选按钮的“value”属性中的任何内容。我的尝试导致仅返回单选按钮的“值”，无论将鼠标悬停在哪个单选按钮上。

感谢您的帮助。

Answer 1

//this is just one way to register to the window.onLoad event in jQuery, i prefer it's readability for what is going on    
$(document).ready(function(){
//$("something", "something else") - 'Something Else' limits where jQuery searches for 'something'
// .hover( function A , function B ) - function A is the mouseover event, function B is the mouseleave event
// function(event){}  for All events, jQuery will always pass an "event" parameter if you ask for it on the window .event() registration.  cool stuff you can do with jQuery's "event" parameter can be found here in the references below.
      $("label", "#data_id-element").hover(function(event){
// $(this)  jQuery'itize the html Element the user hovered into 
// .attr("for") - get the value of the 'for' attribute
// $("#" + whatever) - get whatever this is by its id='' attribute
// .val()  - get the value of whatever this is
         var radioValue = $("#"+$(this).attr("for")).val();
      }, 
      function(event){
// $(this)  jQuery'itize the html Element the user hovered out of
// .attr("for") - get the value of the 'for' attribute
// $("#" + whatever) - get whatever this is by its id='' attribute
// .val()  - get the value of whatever this is
        var radioValue = $("#"+$(this).attr("for")).val();
      });

    });

Answer 2

如果我理解正确的话，当您将鼠标悬停在label 上时，您希望获取与label 关联的单选按钮的值。如果是这种情况，请尝试如下操作：

$("label").mouseover(function() {
    var radioButtonValue = $(this).find("input").val(); 
});

这是一个工作示例。