如何在 jquery 中单击按钮的行中显示或隐藏图像加载器？

Question

我有一个带有更新面板的网格视图，我在回发发生时设置了一个图像加载器，但是当我单击例如第 5 行中的一个按钮时，所有加载器都内联显示，但我只需要准确显示我单击它的按钮附近的图像加载器，如何在 j 查询或 java 脚本中执行此操作？

<script type="text/javascript">
                                   var prm = Sys.WebForms.PageRequestManager.getInstance();
                                   prm.add_beginRequest(BeginRequestHandler);
                                   prm.add_endRequest(EndRequestHandler);

                                   function BeginRequestHandler(sender, args) {
                                       //$(".load").show();
                                       $('.btn').live("click", function () {
                                           //$('tr [type="checkbox"]:checked').parent().parent().each(function () {
                                               //if ($(this).find('input[id*="txtSalaryHead"]').length > 0) {
                                                   //alert($(this).find('input[id*="txtSalaryHead"]').val() + "---" + $(this).find('input[id*="hdnHeadId"]').val())
                                               //}
                                           $(".load").show();
                                           });

                                       //});
                                   }

                                   function EndRequestHandler(sender, args) {
                                       $(".load").hide();

                                   }
                               </script>  

这是我的代码：

<asp:Panel runat="server" ID="pnl1">
                               <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                                   <ContentTemplate>


                                        &nbsp;
                                       <asp:Label ID="Label6" runat="server" Font-Bold="True" ForeColor="#D53B22"
                                           Text="تعداد : " Width="42px"></asp:Label>
                                       <asp:DropDownList ID="ddl_no" runat="server" CssClass="ddlno">
                                           <asp:ListItem>1</asp:ListItem>
                                           <asp:ListItem>2</asp:ListItem>
                                           <asp:ListItem Value="3"></asp:ListItem>
                                           <asp:ListItem Value="4"></asp:ListItem>
                                           <asp:ListItem Value="5"></asp:ListItem>
                                           <asp:ListItem Value="6"></asp:ListItem>
                                           <asp:ListItem Value="7"></asp:ListItem>
                                           <asp:ListItem Value="8"></asp:ListItem>
                                           <asp:ListItem Value="9"></asp:ListItem>
                                           <asp:ListItem Value="10"></asp:ListItem>

                                       </asp:DropDownList>
                                       &nbsp;
                                        <asp:Button ID="btn_addBasket" runat="server" CssClass="btn"  Text="اضافه به سبد"  OnClick="btn_addBasket_Click" />

                                       <img src="images/ajax-loader.gif" class="load" style="display:none;"/>
                                   </ContentTemplate>
                               </asp:UpdatePanel> 
                               <script type="text/javascript">
                                   var prm = Sys.WebForms.PageRequestManager.getInstance();
                                   prm.add_beginRequest(BeginRequestHandler);
                                   prm.add_endRequest(EndRequestHandler);

                                   function BeginRequestHandler(sender, args) {
                                       //$(".load").show();
                                       $('.btn').live("click", function () {
                                           //$('tr [type="checkbox"]:checked').parent().parent().each(function () {
                                               //if ($(this).find('input[id*="txtSalaryHead"]').length > 0) {
                                                   //alert($(this).find('input[id*="txtSalaryHead"]').val() + "---" + $(this).find('input[id*="hdnHeadId"]').val())
                                               //}
                                           $(".load").show();
                                           });

                                       //});
                                   }

                                   function EndRequestHandler(sender, args) {
                                       $(".load").hide();

                                   }
                               </script>
                           </asp:Panel>  

此代码在我的网格视图模板中，我想在我的按钮（id=btn_addbasket）单击时显示带有 id=loader 的 img

Answer 1

如果没有看到您的标记，我无法更具体，但总的来说，看起来像这样的事情正在发生：

<div>
    <div>
        <span class="load">something</span>
        <button class="btn">click here</button>
    </div>
    <div>
        <span class="load">something</span>
        <button class="btn">click here</button>
    </div>
    <div>
        <span class="load">something</span>
        <button class="btn">click here</button>
    </div>
</div>

因此，在您的 JavaScript 代码中，当您引用 $('.load') 时，您将引用具有该类的 每个 元素。但是您只想引用与单击的按钮最近的元素。也许不是这个：

$(".load").show();

试试这样的：

$(this).closest('div').find('.load').show();

同样，没有看到您的标记，我无法具体说明。这是一个一般概念，而不是要复制/粘贴来解决您的问题的代码。但这本质上是在做的是：

1. 引用被点击的按钮：$(this)
2. 将父 div（或您使用的任何元素）引用到该按钮：$(this).closest('div')
3. 使用类load引用该父级的子级：$(this).closest('div').find('.load')

这样，在调用show() 时，只会引用与特定按钮共享该公共父元素的类load 的元素（我猜每个按钮应该只有一个）。