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

时间:2011-10-20 01:20:25

标签: jquery html radio-button css-position

所以我的博客设置为在循环中从我的数据库中提取帖子。每个帖子(#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>

1 个答案:

答案 0 :(得分: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>