1

我有一个RadioButtonList赞：

<asp:RadioButtonList ID="rbl1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" SelectedValue='<%#Bind("A1") %>'>
  <asp:ListItem runat="server" Text="1" Value="1" class="radiobuttonlist"></asp:ListItem>
  <asp:ListItem runat="server" Text="2" Value="2" class="radiobuttonlist"></asp:ListItem>
  <asp:ListItem runat="server" Text="3" Value="3" class="radiobuttonlist"></asp:ListItem>
  <asp:ListItem runat="server" Text="4" Value="4" class="radiobuttonlist"></asp:ListItem>
  <asp:ListItem runat="server" Text="5" Value="5" class="radiobuttonlist"></asp:ListItem>
</asp:RadioButtonList>

我想将红色应用于ListItem其value为 1 的颜色，黄色应用于ListItem其value为 2 的颜色，绿色应用于ListItem其value为 3 的颜色等等。我该怎么做？

我正在使用 ASP.Net 网络表单。jQuery 或 CSS 都可以。

问题是我有超过 10 个单选按钮列表。我必须像我在上面的问题中提到的那样为所有这些设置颜色。每个单选按钮列表显然都有不同的 ID，但它们都有 5 个选项。完成这项任务的最佳方法是什么？

4

4 回答 4

2

你可以给每个不同的 CSS 类，ListItem然后定义它们的颜色。就像这样：

ASP.NET：

<asp:ListItem runat="server" Text="1" Value="1" class="radiobuttonlist1"/>
<asp:ListItem runat="server" Text="2" Value="2" class="radiobuttonlist2"/>

CSS：

.radiobuttonlist1{
     color:red;
 }
.radiobuttonlist2{
     color:yellow;
 }
于 2013-07-11T06:23:42.690 回答
2

或者在你后面的代码中可以使用这个：

foreach (ListItem i in rbl1.Items)
     if (i.Value == "1")
         i.Attributes["style"] = "color:red;";
     else if (i.Value == "2")
         i.Attributes["style"] = "color:yellow;";
于 2013-07-11T06:27:18.437 回答
1

您可以对每个函数使用 jQuery，如下所示

 $("#rbl1 option").each(function()
 {
    $(this).css('backgroundColor', 'red');
 });

这将改变整个项目的背景颜色。

在您的情况下，您还必须检查这些值

 $("#rbl1 option").each(function()
 {
     if($(this).val()=="1")
         $(this).css('backgroundColor', 'red');
     if($(this).val()=="2")
         $(this).css('backgroundColor', 'yellow');
     if($(this).val()=="3")
         $(this).css('backgroundColor', 'green');
 });
于 2013-07-11T06:23:10.060 回答
1

如果你有 10 个RadioButtonList并且想为每一个做同样的事情，你可以对 5 个中的每一个进行分类ListItem并在 CSS 中定义颜色。两个例子RadioButtonList：

<asp:RadioButtonList ID="rbl1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" SelectedValue='<%#Bind("A1") %>'>
<asp:ListItem runat="server" Text="1" Value="1" class="radiobuttonlist1"/>
<asp:ListItem runat="server" Text="2" Value="2" class="radiobuttonlist2"/>
<asp:ListItem runat="server" Text="3" Value="3" class="radiobuttonlist3"/>
<asp:ListItem runat="server" Text="4" Value="4" class="radiobuttonlist4"/>
<asp:ListItem runat="server" Text="5" Value="5" class="radiobuttonlist5"/>
</asp:RadioButtonList>

<asp:RadioButtonList ID="rbl2" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" SelectedValue='<%#Bind("A1") %>'>
<asp:ListItem runat="server" Text="1" Value="1" class="radiobuttonlist1"/>
<asp:ListItem runat="server" Text="2" Value="2" class="radiobuttonlist2"/>
<asp:ListItem runat="server" Text="3" Value="3" class="radiobuttonlist3"/>
<asp:ListItem runat="server" Text="4" Value="4" class="radiobuttonlist4"/>
<asp:ListItem runat="server" Text="5" Value="5" class="radiobuttonlist5"/>
</asp:RadioButtonList>

然后在 CSS 中：

.radiobuttonlist1{
   color:red;
 }
.radiobuttonlist2{
   color:yellow;
 }
.radiobuttonlist3{
   color:green;
 }
.radiobuttonlist4{
   color:magenta;
 }
.radiobuttonlist5{
   color:blue;
 }
于 2013-07-11T14:17:55.157 回答