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有多个数据行，所以当我点击特定数据行的linkButton（比如说第一个）时，它会滑动所有数据行中的所有面板。我只是希望将特定数据行的面板设置为..

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

使用jquery在datalist中切换特定面板

1 个答案: