Question

我创建了一个切换按钮，可以通过4个状态切换单个按钮！

切换按钮位于GridView中，而GridView又嵌套在FormView中。该按钮在HTML页面中运行良好，并在选择4个图像中的每个图像时根据需要将值提交到文本框中。但是在GridView中它不起作用！任何人都可以协助或者我应该知道任何已知的问题吗？

<script type="text/javascript">
   $(document).ready(function() {
     $(".imageButton").ready(function() {
           $("img").click(function() {
               if ($(this).attr("src") == "../../../images/tick_50.png") {
                    $(this).attr("src", '../../../images/excl_mark_50.png'); //orange image
                     $(this).parent().siblings("input").attr("value", '2');
                 } else if ($(this).attr("src") == "../../../images/excl_mark_50.png") {
                     $(this).attr("src", '../../../images/cross_50.png'); //red image
                     $(this).parent().siblings("input").attr("value", '3');
                 } else if ($(this).attr("src") == "../../../images/cross_50.png") {
                     $(this).attr("src", '../../../images/absent_50.png'); //blue image
                     $(this).parent().siblings("input").attr("value", '4');
                 } else if ($(this).attr("src") == "../../../images/absent_50.png") {
                     $(this).attr("src", '../../../images/tick_50.png'); //green image
                     $(this).parent().siblings("input").attr("value", "1");
                }
           });
     });

});
</script>



<asp:FormView ID="FormView1" runat="server" DataSourceId="SqlDataSource1"
                DataKeyNames="tt_id,s_id,n_id,o_id" AllowPaging="false">

   <ItemTemplate>

                    <br />

  <asp:UpdatePanel ID="UpdatePanel2" runat="server">
   <ContentTemplate>
    <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False"
        CssClass="rounded-corner" DataKeyNames="tt_id,s_id,n_id,o_id" 
           ShowFooter="True" >
        <Columns>



            <asp:TemplateField HeaderText="Results" SortExpression="outcome" HeaderStyle-Font-Bold="true" >
                <EditItemTemplate >
                <div class="imageButton"><a href="#"> <asp:Image ID="imgStatusEdit" runat="server" ImageURL='<%# GetImage(CType(Eval("o_id"),Integer)) %>' /></a>
                    <asp:TextBox ID="txtOutcome" runat="server"></asp:TextBox></div>





                </EditItemTemplate>
                <ItemTemplate>
     <asp:Image ID="imgStatus" runat="server" ImageURL='<%# GetImage(CType(Eval("o_id"),Integer)) %>' />
                    <%--<asp:Label ID="Label2" runat="server" Text='<%# Bind("o_id") %>'></asp:Label>--%>

                </ItemTemplate>
                <HeaderStyle Font-Bold="True" />
                <ItemStyle Width="67px" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Notes" SortExpression="notes" ItemStyle-Width="" HeaderStyle-Font-Bold="true">
                <EditItemTemplate>
                    <asp:TextBox ID="txtNotes" runat="server" TextMode="MultiLine" Text='<%#Eval("notes")%>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("notes")%>'></asp:Label>
                </ItemTemplate>
                <HeaderStyle Font-Bold="True" />
            </asp:TemplateField>
            <asp:CommandField ButtonType="Link" UpdateText="Update" CancelText="Cancel" 
                EditText="Edit" ShowEditButton="True" />
        </Columns>


    </asp:GridView>               
      </ContentTemplate>
    </asp:UpdatePanel>              
             </ItemTemplate>
</asp:FormView>

Answer 1

$(document).ready(function () {
            $('.imageButton').find('img').on('click', function () {
                if ($(this).attr('src') == '../../../images/tick_50.png') {
                    $(this).attr('src', '../../../images/excl_mark_50.png'); //orange image
                    $(this).parents('.imageButton').find('input').val('2');
                } else if ($(this).attr('src') == '../../../images/excl_mark_50.png') {
                    $(this).attr('src', '../../../images/cross_50.png'); //red image
                    $(this).parents('.imageButton').find('input').val('3');
                } else if ($(this).attr('src') == '../../../images/cross_50.png') {
                    $(this).attr('src', '../../../images/absent_50.png'); //blue image
                    $(this).parents('.imageButton').find('input').val('4');
                } else if ($(this).attr('src') == '../../../images/absent_50.png') {
                    $(this).attr('src', '../../../images/tick_50.png'); //green image
                    $(this).parents('.imageButton').find('input').val('1');
                }
            });
        });

Gridview中的切换按钮不起作用？

1 个答案: