0

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

4

1 回答 1

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')

这样，只有load在调用show().

于 2013-10-28T13:07:19.197 回答