Jquery 在 .net 数据列表中显示/隐藏

发布于 2024-12-07 12:12:13 字数 977 浏览 1 评论 0原文

我有一个返回新闻文章的 .net Datalist，我想要的只是显示标题，然后当您单击标题链接时显示正文。

这就是我到目前为止所拥有的 HTML

<asp:DataList ID="dlNewsArticles" DataSourceID="SqlDataSourceNewsArticles" runat="server">
    <ItemTemplate>
        <div class="news">
            <strong><a class="trigger" href="#"><%#Eval("Headline") %></a> </strong><br />
            <div class="newsarticle"><%#Eval("ArticleBody") %></div>
            <br /><br /><br />
        </div>
        </ItemTemplate>
</asp:DataList>

Javascript

(function ($) {
        $(document).ready(function () {
            $('.newsarticle').hide();
            $('a.trigger').click(function () {
                $(this).next("div").slideToggle();


            });
        });
    })(jQuery);

唯一有效的部分是在加载时隐藏 .newsarticle div。当谈到 Jquery 时，我是一个十足的菜鸟，所以任何指点都将不胜感激，

干杯

原文

I have a .net Datalist returning news articles what I want to happen is for only the headlines to show and then when you click the headline link the body to show.

This is what I have so far
HTML

<asp:DataList ID="dlNewsArticles" DataSourceID="SqlDataSourceNewsArticles" runat="server">
    <ItemTemplate>
        <div class="news">
            <strong><a class="trigger" href="#"><%#Eval("Headline") %></a> </strong><br />
            <div class="newsarticle"><%#Eval("ArticleBody") %></div>
            <br /><br /><br />
        </div>
        </ItemTemplate>
</asp:DataList>

Javascript

(function ($) {
        $(document).ready(function () {
            $('.newsarticle').hide();
            $('a.trigger').click(function () {
                $(this).next("div").slideToggle();


            });
        });
    })(jQuery);

The only part that seems to work is the hiding of the .newsarticle divs on load.
Am a complete Noob when it comes to Jquery so any pointers will be gratefully recieved

Cheers

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡水深流 2024-12-14 12:12:13

next() 函数将返回 a 之后的下一个元素。我假设它正在查找，它与 "div" 选择器不匹配，因此不会返回任何内容。

我会使用类似的方法，

 $(this).parent().siblings("div").slideToggle();

转到链接的父元素，在本例中为 strong，然后找到 strong 元素的同级元素 div，这会找到您正在寻找的人

The next() function will return the next element after the a. I assume that it is finding the <br/>, which doesn't match the "div" selector and so nothing is returned.

I would use something like

 $(this).parent().siblings("div").slideToggle();

That would go to the parent element of the link, strong in this case, then find the siblings of the strong element that are divs, which would find the one that you are looking for

回复收藏 0 原文

时光是把杀猪刀 2024-12-14 12:12:13

您的选择器不太正确。尝试 -

(function ($) {
        $(document).ready(function () {
            $('.newsarticle').hide();
            $('a.trigger').click(function () {
                $(this).parents(".news").children(".newsarticle").slideToggle();
            });
        });
    })(jQuery);

这应该找到具有 news 类的单击链接的父“div”，然后找到具有“newsarticle”类的该 din 的子项。

Your selector is not quite right. Try -

(function ($) {
        $(document).ready(function () {
            $('.newsarticle').hide();
            $('a.trigger').click(function () {
                $(this).parents(".news").children(".newsarticle").slideToggle();
            });
        });
    })(jQuery);

That should find the parent 'div' of the clicked link that has a news class, then find the child item of that din that has the 'newsarticle' class.

回复收藏 0 原文

~没有更多了~