jQuery與Wordpress循環。顯示/隱藏內容？

目前，我有一個網站，抓住從類別中的12發最近的帖子，並將其顯示爲一個鏈接到他們的永久鏈接，與後縮略圖的鏈接圖像。jQuery與Wordpress循環。顯示/隱藏內容？

這裏你可以看到一個工作示例：http://mathewhood.com/sitefiles/

我想要做的，是某種功能添加到我的循環，讓我做這樣，當你點擊這些列表中的元素之一，它將顯示the_content（）;爲每個元素。

我發現這個 - http://gsgd.co.uk/sandbox/jquery/easing/我認爲這可能會提供我想要的功能（理想情況下是進出），但我在實現它的過程中掙扎着！如果有人知道我可以如何做到這一點，請回答這個問題，並獲得您應得的贊成票！

http://jsfiddle.net/XzJgU/ - 這是我的電流回路，到目前爲止，任何幫助將不勝感激!!!!!!!!!

來源

2011-08-17 Mathew Hood

類似的東西應該工作 - http://jsfiddle.net/XzJgU/5/。它爲循環中的每個帖子呈現內容，默認情況下使用CSS隱藏。點擊帖子後，會將其內容移至＃顯示帖子，使其可見。當單擊另一個帖子時，它會移回原始容器，並將新的帖子內容移動到那裏。

來源

2011-08-17 02:37:34 shesek

嘿，我只是想實現這一點，但它似乎並沒有做任何事情：○ http://www.mathewhood.com/sitefiles/ –

你好像已經移除了它？你能把它恢復嗎？我實際上並沒有運行這些代碼，而且我也沒有真正期望這樣工作，只是給出了一個如何工作的總體思路。你嘗試過調試嗎？看到什麼是行不通的？是否調用事件回調？它是否找到包含帖子內容的元素？它是否發現它應該將內容移動到的元素？ append（）調用失敗？控制檯中是否有錯誤？ – shesek

我不是你想怎麼這個工作完全清楚 - 你尋找一個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="placeholder" /> HTML頁面中，你想要的內容出現。

使用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; 
    } 
});

來源

2011-08-17 02:37:47

我對jax沒有經驗，所以我認爲PHP + JS解決方案對我自己來說更容易。上面的答案有一個想法，我想獲得但功能不是那裏。 –

@Mathew我剛剛彙集了一些可能有所幫助的快速而髒的示例代碼。它不涉及生成內容div的PHP部分，但它看起來像是你自己喜歡做的事情。 –

這裏是我的問題的解決方案。我正在舉例說明如何實現jQuery Easing。

編輯修訂我的帖子，請 View revised sample here 希望它能幫助。

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

來源

2011-08-17 02:38:07

這就是我想要的功能，除了我需要從上面鏈接的wordpress循環生成內容。你知道我怎麼能讓它坐在那個圈內，並且首先隱藏內容，然後變得可見？ –

@Mathew請查看我爲您創建的修訂示例。我希望它有幫助。 –

@Mathew我認爲Jasper的樣本對你來說工作得很好，你所需要的只是瞭解內容如何被操縱。 –

有很多方法可以實現這一點。最高效的可能是一個完整的Ajax解決方案，但這需要一個Wordpress插件和一些高級腳本。

最直接的解決方案是爲動態內容添加一個框，將每個帖子的內容輸出到隱藏的DIV下的永久鏈接/圖像下，然後使用javascript將內容從隱藏的DIV移動到動態內容框一個固定鏈接被點擊。我在http://jsfiddle.net/HF9Pr/上編寫了一些代碼。

來源

2011-08-17 03:39:12

試試這個：

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

來源

2011-08-17 12:07:59 SilverHorn

jQuery與Wordpress循環。顯示/隱藏內容？

回答

相關問題