Question

我先前问了这个问题，但我没有发布代码。所以这就是......

<?php require(database.php); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.comment-wrap {
    width: 300px;
    overflow: hidden;
    margin-bottom: 10px;
}
.reply {
    overflow: hidden;
    margin-top: 10px;
}
.comment-wrap .replyLink {
    float: right;
}
.comment-wrap .comment {
    float: left;
    margin-left: 5px;
}
.comment-wrap .img {
    background-color: #F00;
    height: 50px;
    width: 50px;
    float: left;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
                $(".reply").hide();
        });
    $(document).ready(function() {
        $('.replyButton').click(function() {
            $(".reply").show();
        });

    });
</script>
</head>

<body>
<?php

$sql= "SELECT * FROM comments";
$result = $database->query($sql);

while($row = mysql_fetch_array($result)) {
    echo '<div class="comment-wrap">';
        echo '<div class="img">' . $row['img'] .'</div>';
        echo '<div class="comment">' . $row['comment'] . '</div>';
        echo '<div class="replyLink">';
        echo '<a href="#" class="replyButton" ">Reply</a></div>';
    echo '</div>';
    echo '<div class="reply">
    Type your message: <br />
      <form id="form1" name="form1" method="post" action="">
            <label for="reply"></label>
            <textarea name="replyMessage" class="replyMessage" cols="45" rows="5"></textarea>
      </form>';
    echo '</div>';
}
?>


</body>
</html>

当用户点击回复按钮时，回复类会扩展到之前隐藏的所有注释。但我希望回复类仅扩展用户点击回复按钮的评论。

内容将存储在MySQL数据库中并通过PHP检索。但在这里我只需要jQuery部分的帮助。我不是要求完整的代码，只是给我一些提示，以便我可以解决它。

Answer 1

http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/

将类“切换”给要应用的任何元素显示/隐藏功能，这里是JS

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Show';
var hideText='Hide';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

Answer 2

文档中只有一个具有相同ID的元素，因此您可以更改类的ID

echo '<a href="#" class="replyButton" ">Reply</a></div>';

并使用此jQuery代码

$('.replyButton').click(function() {
   $(this).parent().next().show();
});

这将在父母之后显示下一个元素。父级为.comment-wrap，下一个元素为.reply

需要有关PHP / jQuery注释脚本的帮助

2 个答案: