2011-05-11 76 views
0

更新問題:如何基於懸停在單選按鈕,以顯示格

<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

如果超過單選按鈕一個用戶懸停然後顯示DIV 1如果懸停在單選按鈕兩個然後顯示div 2等......

但不知何故上述代碼不起作用,當我嘗試任何幫助嗎?

+0

在腳本中嘗試'if'語句。 – klox 2011-05-11 02:14:55

+0

單選按鈕的代碼在哪裏? – Hogan 2011-05-11 02:19:28

+0

我已更新我的問題 – 2011-05-11 12:22:08

回答

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

我已更新我的問題並添加單選按鈕代碼 – 2011-05-11 12:52:08

+1

這應該回答你的問題:[http://stackoverflow.com/questions/308301/reading-從選擇的值 - 從 - aspquanttonlist使用jQuery的](http://stackoverflow.com/questions/308301/reading-the-selected-value-from-aspradiobuttonlist-using-jquery) - 更具體地說,我喜歡第二個答案 – 2011-05-11 21:36:42

0

我要冒險猜測..「rbl_1」是一個單選按鈕的ID?

如果是這樣,那麼你的選擇器將無法工作。只是做:

$('#rbl_1') 
+0

我已更新我的問題並添加單選按鈕代碼 – 2011-05-11 12:22:54

0

這小提琴作品 - 你必須懸停在無線電的小圓圈:

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> 

上面的代碼。