在Wordpress中使用PHP的jQuery

Question

我想在我的Wordpress帖子中添加一個jQuery動畫。

動畫效果很好，但是對於每個帖子來說，如何做到這一點很難。 意思是，每個帖子都分配了一個單獨的ID（例如post-xxxx ），知道帖子ID（我所知道的）的唯一方法是通過Wordpress的' the_ID()函數。

我的jQuery在索引PHP文件中的腳本標記中運行。 我該怎么做呢？ 我唯一的好主意是為帖子的DIV標簽添加一個onclick HTML監聽器，然后在jQuery代碼中使用this引用但它從未執行過（不確定我的代碼是否錯誤）。

這是我試過的那個代碼：

<script>
    function('test') {
        $(this).animate({
            height: '+=350'
        }, {
            duration: 500
        });

        $('.review-thumb').animate({
            opacity: 0
        }, {
            duration: 500
        });
    },
</script>

這是我的HTML標記：

<div onclick="test" class="post number-<?php echo $number; ?> colour-<?php echo $colour; ?>" id="post-<?php the_ID(); ?>">

網站主題可以在http://vusavusa.com/blog/?theme=vusavusa2找到。 請原諒現在內容的混亂。

Answer 1

假設所有帖子都以post- identifier開頭，你可以這樣做。 下面的選擇器將獲取所有具有以post-開頭的id輸入。

$('input[id^="post-"]').animate({ height: '+=350' }, { duration: 500 });

這個概念可以適應你想要做的任何事情，例如：

/** Assign an animation to each element */
$('input[id^="post-"]').click(function() {
    $(this).animate({ height: '+=350' }, { duration: 500 });
    return false;
});

另一種選擇是使用slideToggle進行動畫處理以將Post擴展為完整視圖。 您的完整視圖將被預加載，但默認情況下是隱藏的，並且將有一個post-full類。

CSS：

.post-full { display: none; }

JS：

$(function() { 
    $('[id^="post-"]').click(function() {
        $(this).find('.post-full').slideToggle(500, function(){});
        return false;
    });
});

Answer 2

為什么不添加一個類（例如“postClass”）並使用$('.postClass')