切換特定面板內DataList控件與jQuery

Question

的jQuery：

function chngimg() { 
     var img = document.getElementById('Arrow').src; 
     if (img.indexOf('arrow-right.png') != -1) { 
      document.getElementById('Arrow').src = 'Content/img/arrow-bottom.png'; 
     } 
     else { 
      document.getElementById('Arrow').src = 'Content/img/arrow-right.png'; 
     } 

    } 
    $(document).ready(function() { 
     $(".solutionsCommentsPanel").hide(); 
     $(".linkButton").click(function() { 
      $(".solutionsCommentsPanel").slideToggle(300); 
      chngimg(); 
     }); 
    }); 

DataList的項模板：

    <ItemTemplate> 
         <div class="solution"> 
          <div class="row"> 
           <div class="col-md-6"> 
            <h4><%# Eval("Title") %></h4> 
           </div> 
           <div class="col-md-2"><b>Simple</b></div> 
           <div class="col-md-2"><b><%# Eval("Likes") %> likes</b></div> 
           <div class="col-md-2"> 
            <asp:Button ID="btnReminder" runat="server" Text="Set Reminder" 
             class="btn-primary" ToolTip="Set a reminder for this solution." 
             Height="25px" /> 
           </div> 
          </div> 
          <div> 
           <%# Eval("Description") %> 
          </div> 
          <div class="solution_footer"> 

           <asp:LinkButton ID="btnComments" runat="server" OnClientClick="return false;" 
            CssClass="linkButton"> 
            <img id="Arrow" alt=">>" 
             src="Content/img/arrow-right.png" /> 
            Comments | Actions 
           </asp:LinkButton> 
          </div> 
          <asp:Panel ID="panelCommentsActions" runat="server" CssClass="solutionsCommentsPanel"> 
           Comments and Actions 
          </asp:Panel> 
         </div> 
        </ItemTemplate> 

問題是：

由於DataList控件具有多行數據，所以當我點擊一個特定數據行的linkBut​​ton（比如說第一個），它滑動所有數據行中的所有面板。我只是希望那個特定的數據行的面板被toggeled ..

Answer 1

您可以嘗試

$(".linkButton").click(function() { 
    $(this) 
    .closest('.solution_footer') // Find closest div 
    .next(".solutionsCommentsPanel").slideToggle(300); 
    chngimg($(this).find('img')); //assuming image will be rendered as a child 
}); 

還要改變特定方向的圖像修改功能

function chngimg(img) { 
    if (img.attr('src').indexOf('arrow-right.png') != -1) { 
     img.attr('src', 'Content/img/arrow-bottom.png'); 
    } else { 
     img.attr('src', 'Content/img/arrow-right.png'); 
    } 
}