如何在 jquery 脚本中获取动态帖子 ID 或值

Question

我正在开发一个小的 wordpress 插件“评价我的任何东西”。该插件在单个帖子上运行良好，但在博客页面上，当有多个帖子时，插件无法查看点击是从哪个帖子 ID 完成的。它始终采用页面的第一个帖子值。

我已将 post id 添加到 id 和类名以解决问题（例如：post_id$post->ID），但现在我被阻止以这种方式编辑 jquery 文件。

投票后项目的 php 代码：

 <input type=\"hidden\" id=\"post_id$post->ID\" value=\"" . $post->ID . "\" />
    <div class=\"vote\">
<table>
    <tr><td>
    <a class=\"vote_up\" href=\"#\"></a></td>
<td>
    <a class=\"vote_down\" href=\"#\"></a></td></tr>
    <tr>
<td class=\"up_perc$post->ID\">" . get_percentage(1, $post->ID ) ."%</td>
<td class=\"down_perc$post->ID\">" . get_percentage(2, $post->ID) . "% </td>
</tr>
    </table></div>

 <div class=\"vote_succ$post->ID\"></div>

jquery 代码（赞成票和反对票都差不多）：

jQuery(document).ready(function($) { 


        $(".vote_up").click(function(e) { 
        e.preventDefault();

        $.post('/wp-content/plugins/rate-my-whatever/rate.php', {vote_type: "1", post_id: $("#post_id1").val()}, function(data) {

            $(".vote_succ1").html(data);
            $.post('/wp-content/plugins/rate-my-whatever/rate.php', {action: "getPercentage",  vote_type: "1", post_id: $("#post_id1").val()}, function(data2) {
                $(".up_perc1").html(data2);
            });
            $.post('/wp-content/plugins/rate-my-whatever/rate.php', {action: "getPercentage", vote_type: "2", post_id: $("#post_id1").val()}, function(data3) {
                $(".down_perc1").html(data3);
            });
        });
    });

我在一些 id 和 class 元素之后静态放置“1”以检查我的问题将如何解决，它适用于 id 和 value 为“1”的 Post 1，现在我需要替换“1” #post_id、.vote_succ、.up_perc、.down_perc 的末尾通过动态代码使其与 php 代码生成的动态元素一起使用。

感谢您的帮助。

Answer 1

您需要更改您的代码，使其在被点击的单元上运行，而不是在整个页面中该类的所有对象上运行。最简单的方法是将每个单元放在这样的容器 div 中，并且只使用类名，不使用 ID 值：

<div class=\"voteUnit\">
    <input type=\"hidden\" class=\"post_id\" value=\"" . $post->ID . "\" />
    <div class=\"vote\">
    <table>
        <tr>
            <td><a class=\"vote_up\" href=\"#\"></a></td>
            <td><a class=\"vote_down\" href=\"#\"></a></td>
        </tr>
        <tr>
            <td class=\"up_perc\">" . get_percentage(1, $post->ID ) ."%</td>
            <td class=\"down_perc\">" . get_percentage(2, $post->ID) . "% </td>
        </tr>
    </table>
    </div>

    <div class=\"vote_succ\"></div>
</div>

然后，通过使用$(this).closest('.voteUnit').find()在点击的投票单元中查找对象而不是查看整个网页并查找对象，更改代码以在单击的同一投票单元中查找相关对象在所有投票单元中。 .closest('.voteUnit') 从单击的项目中查找祖先链，直到找到具有 class=voteUnit 的父项。然后代码可以使用它作为子树来搜索投票单元中的其他对象。

jQuery(document).ready(function($) { 
    $(".vote_up").click(function(e) { 
        var unit$ = $(this).closest('.voteUnit');
        e.preventDefault();

        $.post('/wp-content/plugins/rate-my-whatever/rate.php', {vote_type: "1", post_id: unit$.find(".post_id").val()}, function(data) {

        unit$.find(".vote_succ").html(data);
        $.post('/wp-content/plugins/rate-my-whatever/rate.php', {action: "getPercentage",  vote_type: "1", post_id: unit$.find(".post_id").val()}, function(data2) {
            unit$.find(".up_perc").html(data2);
        });
        $.post('/wp-content/plugins/rate-my-whatever/rate.php', {action: "getPercentage", vote_type: "2", post_id: unit$.find(".post_id").val()}, function(data3) {
            unit$.find(".down_perc").html(data3);
        });
    });
});