jQuery特定のラジオボタンの値を選択したときに別のdivを基準にdivを表示する

Question

私のブログでは、自分のデータベースからループ内の投稿を引き出すように設定しています。各ポスト（#post_）は1組のラジオボタンと結合されています。ラジオボタンが選択されると、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>