Переключите конкретную панель внутри 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 в Item Шаблон:

    <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 имеет несколько строк данных, поэтому, когда я нажимаю на linkButton конкретного datarow (скажем, сначала), он скользит по всем панелям во всех строках данных. Я просто хочу, чтобы панель конкретной строки данных, чтобы быть 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'); 
    } 
}