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>

和

上面的代码。

如何基于悬停在单选按钮上显示div

3 个答案: