当选择特定单选按钮值时，jQuery 显示相对于另一个 div 的 div

Question

因此，我将博客设置为循环从数据库中提取帖子。每个帖子 (#post_) 都与一对单选按钮相连。当选择单选按钮时，ajax 会将值发送到 check.php，并将值放入我的数据库中。然后返回的 html 显示在#Message_ 中。

我想要做到这一点，以便仅当选择 Like 单选按钮时，div (#Message_) 才会出现在该帖子 div 的右上角。

这是我当前拥有的代码，当选择任何单选按钮时显示#Message，但仅在#post 下方显示它。

调用循环：

<div id="content">

<form name="myform" action="" method="post">
        <legend>Posts</legend>

<?php
$data = mysql_query("SELECT * FROM Posts");
while($row = mysql_fetch_array( $data )){
?>

jQuery 本身，位于循环内：

<script type="text/javascript">
$(document).ready(function() {

    $("input[name*='pref_<?php echo $row['postID']; ?>']").click(function() {
        var postID = <?php echo $row['postID']; ?>;
        var value = $(this).val();
        var userID = <?php echo $current_user->ID; ?>;

        $.ajax({
            url: 'check.php',
            type: 'POST',
            data: 'userID=' + userID + '&postID=' + postID + '&value=' + value,
            success: function(result) {
                $('#Message_<?php echo $row['postID']; ?>').html('').html(result);
            }
        });

    });

});
</script>

显示循环内的帖子：

<div id="post_<?php echo $row['postID']; ?>" class="post">
<div id="post_<?php echo $row['postID']; ?>_inside">
    <b><?php echo $row['Title']; ?></b><br>
    Expires: <?php echo $row['Exp']; ?><br>
    <ul id="listM"></ul>

    <form id="form_<?php echo $row['postID']; ?>" action="/">  
        <fieldset> 
            <div class="left"><p><input id="like_<?php echo $row['postID']; ?>" type="radio" name="pref_<?php echo $row['postID']; ?>" value="1"<?php if ($checked['value'] == "1") echo " checked"; ?> />
            <label for="like_<?php echo $row['postID']; ?>">Like</label></p></div>
            <div class="right"><p><input id="dislike_<?php echo $row['postID']; ?>" type="radio" name="pref_<?php echo $row['postID']; ?>" value="0"<? if ($checked['value'] == "0") echo " checked"; ?> />
            <label for="dislike_<?php echo $row['postID']; ?>">Dislike</label></p></div>
                <hr />
        </fieldset>  
    </form>  
</div>
</div>
<div id="Message_<?php echo $row['postID']; ?>"></div>

结束循环：

<?php 
} 
?>

</div>

Answer 1

未经测试，但你可以弄清楚我在这里做了什么：

<script type="text/javascript">
$(document).ready(function() {

    $("input[name*='pref_<?php echo $row['postID']; ?>']").click(function() {
        var postID = <?php echo $row['postID']; ?>;
        var value = $(this).val();
        var likeDislike = $(this).id().toString().replace(/(.*)_(.*)/,'$1'); //get 'like or dislike'
        var userID = <?php echo $current_user->ID; ?>;

        $.ajax({
            url: 'check.php',
            type: 'POST',
            data: 'userID=' + userID + '&postID=' + postID + '&value=' + value,
            success: function(result) {
                if (likeDislike == 'like') { 
                    //do like stuff
                    //move the message element into the post at the top, use CSS like float:right or text-align:right etc. to position it to the right
                    $('#Message_<?php echo $row['postID']; ?>').prependTo('#'+postID);
                }
                else if (likeDislike == 'dislike') { 
                    //do dislike stuff
                    $('#Message_<?php echo $row['postID']; ?>').html('').html(result);
                }
            }
        });

    });

});
</script>