jQuery与Wordpress循环.显示/隐藏内容

jQuery with Wordpress Loop. Show / Hide content?

本文关键字：隐藏 显示 Wordpress 循环 jQuery      更新时间：2023-09-26

目前我有一个网站，从一个类别中抓取12个最近的帖子，并将它们显示为链接到它们的永久链接，与帖子缩略图图像作为链接图像。

您可以在这里看到一个工作示例:http://mathewhood.com/sitefiles/

我想做的是，以某种方式在我的循环中添加功能，这将允许我这样做，当你点击这些列表元素之一时，它将显示the_content();

我发现这个- http://gsgd.co.uk/sandbox/jquery/easing/我认为可能提供我想要的功能(理想情况下jswing进出)，但我正在努力实现它!如果有人知道我怎么能做到这一点，请回答这个问题，并收到你当之无愧的向上投票!

http://jsfiddle.net/XzJgU/-这是我目前的循环到目前为止，任何帮助将非常感激!!!!!!!!!

这是我对你的问题的解决方案。我给出了一个如何实现jquery Easing的例子。

编辑请修改我的帖子查看修改后的示例希望能有所帮助。

<>之前$ (' .thumbs ') .click(函数(e) {e.preventDefault ();var contents = $(this).close ('.recentPost').find('.caption').html();var $container = $('# container ').html(contents);美元container.show()。Animate ({height:200}， {duration: 1000, easing: 'jswing'})。animate({height:100}， {duration: 1000, easing: 'easeInOutCirc'});container.click美元(函数(){美元的容器。animate({height:200}， {duration: 1000, easing: 'easeInExpo'})美元container.fadeOut("慢");container.html美元(");});});

类似的东西应该工作- http://jsfiddle.net/XzJgU/5/。它在循环中呈现每个帖子的内容，默认情况下使用CSS隐藏。当一个帖子被点击时，它将其内容移动到#display -post，使其可见。当另一篇文章被点击时，它会移回原来的容器，新的文章内容也会移到那里。

我不完全清楚您希望如何工作-您是在寻找PHP解决方案还是JavaScript解决方案，或者两者的混合。我有两个建议，你可以让它工作。另外，请注意，你所引用的jQuery库只增加了jQuery的easing选项——也就是说，它只处理动画，而不处理你代码的业务逻辑和行为。

    使用ajax


  1. 这应该在这种情况下工作，因为您没有发出跨域请求。从本质上讲，您将拦截对链接的点击，找出它指向的位置，然后向该页面发出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="placeholder" />在你的HTML页面，你想要的内容出现。

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

    所以你生成的页面看起来像这样: 
    <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>
     ...

    你可以使用类似的东西来切换适当的内容

    $('.recentPost a').click(function(){
    if($(this).attr('id')){
        var x = /link-(.*)/.exec($(this).attr('id')); //figure out which content- div to display
        $('.displayed').hide().removeClass('displayed'); //hide already displayed content
        $('#content-' + x[1]).show().addClass('displayed'); //show content and mark it as displayed
        return false;
    }
});

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

最直接的解决方案是为动态内容添加一个框，在它的永久链接/图像下的隐藏DIV中输出每个帖子的内容，然后使用javascript在点击永久链接时将内容从隐藏DIV移动到动态内容框。我在http://jsfiddle.net/HF9Pr/上编写了一些代码。

试试这个:

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
<style type="text/css"> 
div.panel,p.flip
{
width: 203px;
margin: 0px;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
background: #c1e0fb;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
}
div.panel
{
height: 288px;
display: none;
border-top: 1px dashed #aaa;
}
p.flip
{
border-top: 1px dashed #aaa;
border-bottom: 1px dashed #aaa;
}
</style>
</head>
<body>
<div class="panel">
<b>sclughslru</b>
<br><br>
ertljhvij3p
<br><br>
<b>veuywihtp</b>
<br><br>
ghdjhrntnd
<br><br>
<b>ehv3rtv</b>
<br><br>
vt4k4kb76kb5
<br><br>
<b>edb3jrr3n54</b>
<br><br>
skcehgkheone
</div>
<p class="flip"><img src="https://dl-web.dropbox.com/get/Pictures/Other/up-down.jpg?w=f17ee285" style="width: 12px; height: 10px; margin-right: 10px;" />Information</p>
</body>
相关文章：