0

我正在尝试将 jQuery 动画添加到我的 Wordpress 帖子中。

动画效果很好，但困难的是如何为每个单独的帖子做。意思是，每个帖子都分配有一个单独的 ID（例如post-xxxx），并且知道帖子 ID（我知道）的唯一方法是通过 Wordpress 的the_ID()功能。

我让我的 jQuery 在索引 PHP 文件的脚本标签中运行。我该怎么做呢？我唯一的好主意是在帖子onclick的标签中添加一个 HTML 侦听器DIV，然后this在 jQuery 代码中使用引用，但它从未执行（不确定我的代码是否错误）。

这是我尝试过的那件事的代码：

<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找到。请原谅现在内容的混乱。

4

2 回答 2

2

post-假设所有帖子都以标识符开头，您可以执行类似的操作。下面的选择器将抓取所有以id开头的输入post-。

$('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;
    });
});
于 2013-02-04T23:54:52.253 回答
0

为什么不添加一个类（例如“postClass”）并使用 $('.postClass')

于 2013-02-04T23:52:21.067 回答