当用户将鼠标悬停在JQuery中的单选按钮标签上时显示工具提示 [英] Displaying a tooltip when user hovers on label of radio button in JQuery

问题描述

我有一些单选按钮，形式如下:

I have some radio buttons in a form:

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

当用户将鼠标悬停在单选按钮的标签上时，我正在尝试显示工具提示.我可以这样做，但我也想获取单选按钮的值"属性中的所有内容.我的尝试导致无论悬停在哪个单选按钮上，都只返回单选按钮的值".

I'm trying to display a tooltip when a user hovers over the label of the radio button. I can do this but I also want to get whatever is in the 'value' property of the radio button. My attempts to this resulted in only the 'value' of the radio button being returned regardless of which radio button was hovered over.

感谢帮助.

推荐答案

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

    });

这篇关于当用户将鼠标悬停在JQuery中的单选按钮标签上时显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！