如何更改转发器中所选项目的背景颜色？ [英] how to change background color of selected item in repeater?

问题描述

我想根据用户选择此项目更改div的背景颜色或不。

这是我的代码：

Hi,
I want that change background color of div base on user selected this item or no.
this is my code:

<asp:Repeater ID="rptRss" runat="server">
    <HeaderTemplate>
         <div id="rptRssHeader">
             <div class="RepeaterDivs" style="width:5%;">
                 <asp:Label ID="RptHRssAllowVisible" runat="server" Text="Allow Visible"></asp:Label>
             </div>
             <div class="RepeaterDivs" style="width:5%;">
                 <asp:Label ID="RptHRssEdit" runat="server" Text="Edit RSS"></asp:Label>
             </div>
             <div class="RepeaterDivs" style="width:5%;padding-removed 9px;">
                 <a id="RptHRssDeleteLink" href="Default.aspx?FinalDelRss=true" >
                    <asp:Image ID="RptHRssDeleteImg" ImageUrl="~/Images/trash.png" AlternateText="Delete RSS" CssClass="trashclass" runat="server"  Width="30px" Height="30px"/>
                    </a>
             </div>
             <div class="RepeaterDivs" style="width:15%;">
                 <asp:Label ID="RptHRssTitle" runat="server" Text="Rss Title"></asp:Label>

             </div>
             <div class="RepeaterDivs" style="width:45%;">
                 <asp:Label ID="RptHRssDescription" runat="server" Text="Rss Description"></asp:Label>

             </div>
             <div class="RepeaterDivs" style="width:15%;">
                 <asp:Label ID="RptHRssUrl" runat="server" Text="Rss Url"></asp:Label>

             </div>
             <div class="RepeaterDivs" style="width:10%;">
                 <asp:Label ID="RptHRssPublicationDate" runat="server" Text="Rss Publication Date"></asp:Label>

             </div>
             <div class="RepeaterDivs" style="width:100%;">
                <hr />
            </div>
        </div>
    </HeaderTemplate>
    <ItemTemplate>
        <div   runat="server" id="rptRssContent">
            <div id="rptRssVisibleBtn" class="RepeaterDivs"  style="width:5%;">
                    <a id="RssVisibleLink" href='Default.aspx?VisibleRssId=<%#Eval("Feed_ID") %>'>
                    <asp:Image ID="RssVisibleLinkImg" runat="server" ImageUrl="~/Images/eye(3).png"  Width="30px" Height="30px"/>
                    </a>
            </div>

            <div id="rptRssEditBtn" class="RepeaterDivs" style="width:5%;">
                    <a id="EditRssLink" href='Default.aspx?EditRssId=<%#Eval("Feed_ID") %>'>
                    <asp:Image ID="EditRssImg" runat="server" ImageUrl="~/image/pencil.png"  Width="30px" Height="30px"/>
                    </a>
            </div>
            <div id="rptRssDeleteChkDiv"  class="RepeaterDivs" style="width:5%;">
                <a id="DeleteRssLink" href='Default.aspx?DelRssId=<%#Eval("Feed_ID") %>'>
                    <asp:CheckBox ID="rptRssDeleteChk" runat="server"/>
                </a>
            </div>
            <div id="rptRssTitle" class="RepeaterDivs" style="width:15%;">
              <%#Eval("FTitle")%>

            </div>
            <div id="rptRssDescription" class="RepeaterDivs" style="width:45%;">
              <%#Eval("FDescription")%>

            </div>
            <div id="rptRssUrl" class="RepeaterDivs" style="width:15%;">
                <%#Eval("FUrl") %>
            </div>
            <div id="rptRssPublicationDate" class="RepeaterDivs" style="width:10%;">
                <%#Eval("FPublicationDate") %>
            </div>
            <div class="RepeaterDivs" style="width:100%;">
                <hr />
            </div>
        </div>
    </ItemTemplate>
    <FooterTemplate>
    </FooterTemplate>
</asp:Repeater>

注意：当选中ID = rptRssDeleteChk的复选框时，会选择一个项目。

我感谢任何指导我的人:)

Note: an item is selected when check box with ID=rptRssDeleteChk is checked.
I thanks any one that guide me :)

推荐答案

假设你在document.ready函数中使用jQuery：



：

Assuming you use jQuery:

in document.ready function:

（＃rptRssDeleteChk）。on（checked，function（ ）{

("#rptRssDeleteChk").on("checked", function () {

（this）.closest（＃rptRssContent）。css（background-color，red）;

}）;





如果这有帮助请花时间接受解决方案。



注意：如果你想要纯javascript，你必须使用getElementById并遍历父元素，直到找到rptRssContent

(this).closest("#rptRssContent").css("background-color", "red");
});


If this helps please take time to accept the solution.

NOTE: if you want pure javascript, you have to use getElementById and traverse parent elements until you find rptRssContent

这篇关于如何更改转发器中所选项目的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！