使用jquery切换datalist内的特定面板

jquery：

Datalist的项模板：

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有多个数据行，所以当我单击特定数据行的linkButton（比如first）时，它会滑动切换所有数据行中的所有面板。我只想切换特定数据行的面板。

您可以试试

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

还要更改为特定箭头的图像，请修改您的函数

$(".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');
    }
}