如何基于将鼠标悬停在单选按钮上来显示 div

Question

更新问题：

   <asp:radiobuttonlist runat="server" id="rbl" repeatdirection="Horizontal">
        <asp:listitem text="None" value="0" selected="True" enabled="true"/>
        <asp:listitem text="Float Left" value="1" selected="False" enabled="true"/>
        <asp:listitem text="Float Right" value="2" selected="False" enabled="true"/>
    </asp:radiobuttonlist>

<div id="divid0">0</div>
<div id="divid1">1</div>
<div id="divid2">2</div>

<script language="javascript" type="text/javascript">

        $(document).ready(function () {

        $('#divid0').dialog({
            autoOpen: false,
        });

       $('#divid1').dialog({
            autoOpen: false,
        });

       $('#divid2').dialog({
            autoOpen: false,
        });          

        $('#rbl_0 :radio').hover(

        function() {
            $('#divid0').dialog('open');
        }, function() {
            //$('#divid0').dialog('close');
        });


        $('#rbl_1 :radio').hover(

        function() {
            $('#divid1').dialog('open');
        }, function() {
            //$('#divid1').dialog('close');
        });


        $('#rbl_2 :radio').hover(

        function() {
            $('#divid2').dialog('open');
        }, function() {
            //$('#divid2').dialog('close');
        });

    });
   </script>

我有 3 个单选按钮和 3 个 div

如果用户将鼠标悬停在单选按钮 1 上，则显示 div 1，如果将鼠标悬停在单选按钮 2 上，则显示 div 2 等......

但不知何故，当我尝试任何帮助时，上面的代码不起作用？

Answer 1

我的猜测是您的单选按钮选择器是错误的。这有效：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

<input type="radio" id="rbl_0" />
<input type="radio" id="rbl_1" />
<input type="radio" id="rbl_2" />

<div id="divid0">0</div>
<div id="divid1">1</div>
<div id="divid2">2</div>

<script language="javascript" type="text/javascript">
$(document).ready(function () {
  $("div").hide();
  $('#rbl_0').hover(
  function() {
      $('#divid0').show();
  }, function() {
      $('#divid0').hide();
  });
  $('#rbl_1').hover(
  function() {
      $('#divid1').show();
  }, function() {
      $('#divid1').hide();
  });
  $('#rbl_2').hover(
  function() {
      $('#divid2').show();
  }, function() {
      $('#divid2').hide();
  });
});
</script>

编辑：根据更新后的问题，这可行：

<asp:RadioButtonList runat="server" ID="rbl" RepeatDirection="Horizontal">
    <asp:ListItem Text="None" Value="0" Selected="True" Enabled="true" />
    <asp:ListItem Text="Float Left" Value="1" Selected="False" Enabled="true" />
    <asp:ListItem Text="Float Right" Value="2" Selected="False" Enabled="true" />
</asp:RadioButtonList>
<div id="divid0">0</div>
<div id="divid1">1</div>
<div id="divid2">2</div>

<script language="javascript" type="text/javascript">
$(document).ready(function () {
    $("div").hide();
    $('#<%= rbl.ClientID %> input').each(function () {
        if ($(this).attr("checked")) {
            $("#divid" + $(this).val()).show();
        }
        $(this).click(function () {
            $("div").hide();
            $("#divid" + $(this).val()).show();
        });
    });
});
</script>

Answer 2

我冒险猜测一下。“rbl_1”是单选按钮的 ID？

如果是这样，那么您的选择器将不起作用。就这样吧：

$('#rbl_1')

Answer 3

这个小提琴有效——你必须将鼠标悬停在收音机中的小圆圈上：

http://jsfiddle.net/Qt7pQ/4/

HTML 代码

<div id="rbl_1"><input type="radio" group="one" id="r1" value="Milk"> Milk</div>
<div id="rbl_2"><input type="radio" group="one" id="r2" value="Butter" checked> Butter</div>

<div id="divid0" style="border:1px;">0</div>
<div id="divid1">1</div>
<div id="divid2">2</div>

和

上面的代码。