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

本文关键字：隐藏 显示 图像 加载 jquery 按钮 单击 | 更新日期: 2023-09-27 18:37:04

我有一个带有更新面板的网格视图，并且在回发发生时设置了一个图像加载器，但是当我单击例如第 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

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

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

<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 元素（我猜每个按钮应该只有一个）。

相关文章：