在Wordpress中使用PHP进行jQuery

jQuery with PHP in Wordpress

本文关键字：PHP 进行 jQuery Wordpress      更新时间：2023-09-26

我正试图在Wordpress帖子中添加一个jQuery动画。

动画效果很好，但困难的是如何为每个帖子制作。也就是说，每个帖子都被分配了一个单独的ID（例如post-xxxx），而了解帖子ID（据我所知）的唯一方法是通过Wordpress的the_ID()功能。

我的jQuery运行在索引PHP文件中的脚本标记中。我该怎么做？我唯一的好主意是在帖子的DIV标记中添加一个onclickHTML侦听器，然后在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.请原谅现在内容混乱。

假设所有Post都以post-标识符开头，就可以执行类似的操作。下面的选择器将获取具有以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;
    });
});

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

相关文章：