Javascript 带有Wordpress循环的jQuery。显示/隐藏内容？_Javascript_Jquery_Html_Css_Wordpress

Javascript 带有Wordpress循环的jQuery。显示/隐藏内容？

javascript jquery html css wordpress

Javascript 带有Wordpress循环的jQuery。显示/隐藏内容？,javascript,jquery,html,css,wordpress,Javascript,Jquery,Html,Css,Wordpress,目前，我有一个网站，它从一个类别中抓取了12篇最新的文章，并将它们显示为指向永久链接的链接，而文章的缩略图图像则是链接图像您可以在此处看到一个工作示例：我想做的是，以某种方式将功能添加到我的循环中，这将允许我创建它，以便当您单击其中一个列表元素时，它将显示_content（）；对于每个元素我发现了这一点——我认为这可能会提供我想要的功能（理想情况下是jswing in and out），但我正在努力实现它！如果有人知道我是如何做到这一点的，请回答这个问题，并收到你应得的选票 -这是我目前的

目前，我有一个网站，它从一个类别中抓取了12篇最新的文章，并将它们显示为指向永久链接的链接，而文章的缩略图图像则是链接图像

您可以在此处看到一个工作示例：

我想做的是，以某种方式将功能添加到我的循环中，这将允许我创建它，以便当您单击其中一个列表元素时，它将显示_content（）；对于每个元素

我发现了这一点——我认为这可能会提供我想要的功能（理想情况下是jswing in and out），但我正在努力实现它！如果有人知道我是如何做到这一点的，请回答这个问题，并收到你应得的选票

-这是我目前的循环，任何帮助都将不胜感激

类似的方法应该会奏效-。它呈现循环中每个帖子的内容，默认情况下使用CSS隐藏。单击帖子时，它会将其内容移动到#显示的帖子，使其可见。当点击另一篇文章时，它会移回原来的容器，新的文章内容也会移到那里。

类似的方法应该可以奏效-。它呈现循环中每个帖子的内容，默认情况下使用CSS隐藏。单击帖子时，它会将其内容移动到#显示的帖子，使其可见。当点击另一篇文章时，它会移回原来的容器，新的文章内容也会移到那里。

我不完全清楚您希望如何实现这一点-您是在寻找PHP解决方案还是JavaScript解决方案，或者是两者的混合。我有两条建议，建议你如何使它发挥作用。另外，请注意，您所指的jQuery库只为jQuery添加了缓和选项，即它只处理动画，而不处理代码的业务逻辑和行为

使用ajax
在这种情况下应该可以这样做，因为您没有进行跨域请求。基本上，您需要截取对链接的点击，找出它指向的位置，然后向该页面发出

GET

请求。然后从响应中过滤出相应的HTML，并将其放入页面中。大概是这样的：

$('.recentPost a').click(function(){
    $.get($(this).attr('href'), function(data){
        //make a get request to the page the link linked to
        //and extract the blog content div
        $("placeholder").html($(data).filter(".blogRight"));
    });
    return false; //cancel the browser's default action on click to keep user on page
});

<div id="contentWrap">
        <div class="hidden-featured-content" id="content-f12">
            <div>Your content here</div>
        </div>
        <div class="hidden-featured-content" id="content-f11">
            <div>Your content here</div>
        </div>

        <div id="newBanner"></div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=35" id="link-f12"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured12.png" class="attachment-post-thumbnail wp-post-image" alt="featured12" title="featured12" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=35"><div class="caption">
                <div class="captionTitle">Hello World 12!</div>
                <p></p>
            </div></a>
        </div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=32" id="link-f11"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured11.png" class="attachment-post-thumbnail wp-post-image" alt="featured11" title="featured11" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=32"><div class="caption">
                <div class="captionTitle">Hello World 11!</div>
                <p></p>
            </div></a>
        </div>
     ...

在HTML页面中有一个

，您希望在其中显示内容

使用PHP+JavaScript
您不需要按需获取内容，而是在页面加载时生成内容，但将其隐藏。您将再次拦截单击，但这次您将在页面上找到并显示适当的现有

div

因此，生成的页面将如下所示：

$('.recentPost a').click(function(){
    $.get($(this).attr('href'), function(data){
        //make a get request to the page the link linked to
        //and extract the blog content div
        $("placeholder").html($(data).filter(".blogRight"));
    });
    return false; //cancel the browser's default action on click to keep user on page
});

<div id="contentWrap">
        <div class="hidden-featured-content" id="content-f12">
            <div>Your content here</div>
        </div>
        <div class="hidden-featured-content" id="content-f11">
            <div>Your content here</div>
        </div>

        <div id="newBanner"></div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=35" id="link-f12"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured12.png" class="attachment-post-thumbnail wp-post-image" alt="featured12" title="featured12" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=35"><div class="caption">
                <div class="captionTitle">Hello World 12!</div>
                <p></p>
            </div></a>
        </div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=32" id="link-f11"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured11.png" class="attachment-post-thumbnail wp-post-image" alt="featured11" title="featured11" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=32"><div class="caption">
                <div class="captionTitle">Hello World 11!</div>
                <p></p>
            </div></a>
        </div>
     ...

我不完全清楚您希望如何实现这一点——您是在寻找PHP解决方案还是JavaScript解决方案，或者两者的混合方案。我有两条建议，建议你如何使它发挥作用。另外，请注意，您所指的jQuery库只为jQuery添加了缓和选项，即它只处理动画，而不处理代码的业务逻辑和行为

使用ajax
在这种情况下应该可以这样做，因为您没有进行跨域请求。基本上，您需要截取对链接的点击，找出它指向的位置，然后向该页面发出

GET

请求。然后从响应中过滤出相应的HTML，并将其放入页面中。大概是这样的：

$('.recentPost a').click(function(){
    $.get($(this).attr('href'), function(data){
        //make a get request to the page the link linked to
        //and extract the blog content div
        $("placeholder").html($(data).filter(".blogRight"));
    });
    return false; //cancel the browser's default action on click to keep user on page
});

<div id="contentWrap">
        <div class="hidden-featured-content" id="content-f12">
            <div>Your content here</div>
        </div>
        <div class="hidden-featured-content" id="content-f11">
            <div>Your content here</div>
        </div>

        <div id="newBanner"></div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=35" id="link-f12"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured12.png" class="attachment-post-thumbnail wp-post-image" alt="featured12" title="featured12" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=35"><div class="caption">
                <div class="captionTitle">Hello World 12!</div>
                <p></p>
            </div></a>
        </div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=32" id="link-f11"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured11.png" class="attachment-post-thumbnail wp-post-image" alt="featured11" title="featured11" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=32"><div class="caption">
                <div class="captionTitle">Hello World 11!</div>
                <p></p>
            </div></a>
        </div>
     ...

在HTML页面中有一个

，您希望在其中显示内容

使用PHP+JavaScript
您不需要按需获取内容，而是在页面加载时生成内容，但将其隐藏。您将再次拦截单击，但这次您将在页面上找到并显示适当的现有

div

因此，生成的页面将如下所示：

$('.recentPost a').click(function(){
    $.get($(this).attr('href'), function(data){
        //make a get request to the page the link linked to
        //and extract the blog content div
        $("placeholder").html($(data).filter(".blogRight"));
    });
    return false; //cancel the browser's default action on click to keep user on page
});

<div id="contentWrap">
        <div class="hidden-featured-content" id="content-f12">
            <div>Your content here</div>
        </div>
        <div class="hidden-featured-content" id="content-f11">
            <div>Your content here</div>
        </div>

        <div id="newBanner"></div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=35" id="link-f12"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured12.png" class="attachment-post-thumbnail wp-post-image" alt="featured12" title="featured12" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=35"><div class="caption">
                <div class="captionTitle">Hello World 12!</div>
                <p></p>
            </div></a>
        </div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=32" id="link-f11"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured11.png" class="attachment-post-thumbnail wp-post-image" alt="featured11" title="featured11" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=32"><div class="caption">
                <div class="captionTitle">Hello World 11!</div>
                <p></p>
            </div></a>
        </div>
     ...

这是我解决你问题的办法。我给出了一个关于如何实现jquery的示例

编辑请修改我的帖子希望能有帮助

$('.thumbs').click(function(e){ e.preventDefault(); var contents = $(this).closest('.recentPost').find('.caption').html(); var $container = $('#theContainer').html(contents); $container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:100}, {duration: 1000, easing: 'easeInOutCirc'}); $container.click(function(){ $container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'}) $container.fadeOut('slow'); $container.html(''); }); }); $（'.thumbs'）。单击（函数（e）{ e、预防默认值（）； var contents=$（this）.closest（'.recentPost'）.find（'.caption'）.html（）； var$container=$（'#container'）.html（内容）； $container.show（）.animate（{height:200}，{duration:1000，easing:'jswing'}）。animate（{height:100}，{duration:1000，easeInOutCirc'}）； $container.click（函数（）{ $container.animate（{height:200}，{duration:1000，easeinfo}） $container.fadeOut（'slow'）； $container.html（“”）； }); });

这是我解决你问题的办法。我给出了一个关于如何实现jquery的示例

编辑请修改我的帖子希望能有帮助

有很多方法可以实现这一点。最有效的可能是一个完整的ajax解决方案，但这需要一个Wordpress插件和一些高级脚本

最简单的解决方案是为动态内容添加一个框，在其permalink/image下的隐藏DIV中输出每篇文章的内容，然后在单击permalink时使用javascript将内容从隐藏DIV移动到动态内容框。我在上编写了一些代码。

有很多方法可以实现这一点。最有效的可能是一个完整的ajax解决方案，但这需要一个Wordpress插件和一些高级脚本

最简单的解决方案是为动态内容添加一个框，在