jQuery Показывает div относительно другого div, когда выбрано определенное значение переключателя - PullRequest
Новая
       9

jQuery Показывает div относительно другого div, когда выбрано определенное значение переключателя

1 голос
/ 20 октября 2011

Итак, мой блог настроен так, чтобы извлекать сообщения из базы данных в цикле.Каждый пост (#post_) связан с парой переключателей.Когда выбран переключатель, ajax отправляет значение в check.php, где значения помещаются в мою базу данных.Возвращенный html затем отображается в #Message _.

Я хочу сделать так, чтобы ТОЛЬКО когда выбрана радиокнопка Like, div (#Message_) появился НАД в верхнем правом углу div этого сообщения.

Это код, который у меня есть на данный момент, который отображает #Message, когда выбрана любая радиокнопка, но отображает его только под # сообщением.

Вызов цикла: 

<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 Ответ

1 голос
/ 20 октября 2011

не проверено, но вы можете понять, что я сделал здесь: 

<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>
...