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


Displaying a tooltip when user hovers on label of radio button in JQuery

我在表单中有一些单选按钮:

<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'属性的单选按钮。我的尝试导致只返回单选按钮的"值",无论哪个单选按钮悬停在上面。

感谢您的帮助

//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();
      });
    });

如果我理解正确,您想要获得与label相关联的单选按钮的值,当您将鼠标悬停在label上时。如果是这种情况,请尝试这样做:

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