如果中继器中有多个按钮，如何在单击的按钮上应用CSS? [英] How t apply CSS on clicked button if there is multiple button in repeater?

问题描述

我正在使用中继器中的按钮.因为数据库中只有两条记录，所以当我运行页面时有两个按钮.我想要的就是无论我单击哪个按钮，都应将css添加到该按钮，如果我单击了另一个按钮，则css应该从上一个按钮中删除，并应添加到单击的按钮上.

I am using a button in repeater. because there is only two records in database so there is two button when i run the page. All i want is whichever button i clicked, css should be add to that button and if i clicked another button then the css should b remove from previous button and should be add on clicked button.

   <asp:Repeater ID="rptrQtyVariant" runat="server" OnItemCommand="rptrQtyVariant_ItemCommand" OnItemDataBound="rptrQtyVariant_ItemDataBound">
<ItemTemplate>                                                              
    <asp:Label ID="lblItemId" Visible="false" runat="server" Text=''<%#Eval("ITEM_ID") %>''></asp:Label>
   <asp:Label ID="lblSku" Visible="false" runat="server" Text=''<%#Eval("SKU") %>''></asp:Label>                                                                       
    <asp:LinkButton ID="lnkQtyVariant" CssClass="product-variant__btn pdp-btn" OnClick="lnkQtyVariant_Click1" CommandName="ItemQty" runat="server">
     <asp:Label ID="lblQty" runat="server" Text=''<%#Eval("ITEM_QTY") %>''></asp:Label><br />
                                                                        </asp:LinkButton>
 </ItemTemplate>
 </asp:Repeater>

我尝试过的事情:

What I have tried:

protected void rptrQtyVariant_ItemCommand(object source, RepeaterCommandEventArgs e)
       {
           if (e.CommandName == "ItemQty")
           {
               LinkButton button = e.Item.FindControl("lnkQtyVariant") as LinkButton;
               button.CssClass = "product-variant__btn pdp-btn";

               if (e.Item.ItemIndex == 0)
               {
                   LinkButton lnk = e.Item.FindControl("lnkQtyVariant") as LinkButton;
                   lnk.CssClass = "product-variant__btn pdp-btn product-variant__btn--active";
               }

               else if (e.Item.ItemIndex == 1)
               {
                   LinkButton lnk = e.Item.FindControl("lnkQtyVariant") as LinkButton;
                   lnk.CssClass = "product-variant__btn pdp-btn product-variant__btn--active";
               }

               else
               {
                   LinkButton lnk = e.Item.FindControl("lnkQtyVariant") as LinkButton;
                   lnk.CssClass = "product-variant__btn pdp-btn";
               }
           }
       }

推荐答案

浏览转发器中的项目，找到每个项目中的按钮，然后根据项目是否为所单击的容器来设置类按钮.

Loop through the items in the repeater, find the button in each item, and set the class depending on whether the item is the container of the clicked button.

protected void rptrQtyVariant_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    if (e.CommandName == "ItemQty")
    {
        Repeater repeater = (Repeater)sender;
        foreach (RepeaterItem item in repeater.Items)
        {
            LinkButton button = (LinkButton)item.FindControl("lnkQtyVariant");
            
            button.CssClass = (item == e.Item)
                ? "product-variant__btn pdp-btn product-variant__btn--active"
                : "product-variant__btn pdp-btn";
        }
    }
}

这篇关于如果中继器中有多个按钮，如何在单击的按钮上应用CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！