2011-09-25 44 views
-1

以前我问过这个问题,但是我没有发布代码。所以这里有云......需要关于PHP/jQuery注释脚本的帮助

<?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部分。我不是要求完整的代码,只是给我一些提示,以便我可以解决它。

回答

0

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; 

}); 
}); 
+0

如果我应用切换回复类然后答复类将扩展所有评论,而不是在具体的一个。 – shr3jn

+0

我发布的链接中甚至有一个演示,显示只显示一个元素,并非全部。 – Harri

0

应该有在文档中同一ID只有一个元素等等您可以更改ID为类

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

,并使用此jQuery的代码,而不是

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

这将显示父母之后的下一个元素。父母是.comment-wrap和下一个元素是.reply