Javascript 如何在单击每行中的注释链接时显示每行注释的文本区域

我正在开发一个帖子和评论系统，任何用户都可以发布“你在想什么”，并让其他用户回复他/她的帖子

我遇到的问题是，我希望出现这样一种情况：当用户单击注释链接（锚定div）时，文本区域将出现（显示，fadein），用户注释，然后发布（单击注释按钮时添加到数据库）返回数据库

在我的代码中，我发现当我点击评论链接时，只有第一行可以做我想做的事情，它显示了要评论的文本区域，为什么其他行包含帖子，当我尝试点击评论链接以显示要输入评论的文本区域时，似乎什么都没有发生

查看帖子/评论系统的屏幕截图

下面是显示注释文本区域的js代码

$(document).ready(function()
{


//link to click  action
$('.leavecomment').click(function()
{
var clickedID = this.id; //Split ID string (Split works as PHP explode)
var DbNumberID = clickedID[1]; //and get number from array

$('#leavecomment1'+DbNumberID).fadeIn('slow');
$('#txtcomment').focus(); 

//Textarea without editing.
$(document).mouseup(function()
{
$('#leavecomment1'+DbNumberID).fadeOut('slow');
$('.editpostwrapper').show();
});
});});

</script>

$（文档）.ready（函数（）
{
//链接到单击操作
$（'.leveComment'）。单击（函数（）
{
var clickedID=this.id；//拆分id字符串（拆分与PHP分解一样工作）
var dbnumberrid=单击edid[1]；//并从数组中获取数字
$（'#leveComment1'+DbNumberID）.fadeIn（'slow'）；
$（'#txtcoment'）.focus（）；
//文本区域，无需编辑。
$（文档）.mouseup（函数（）
{
$（'#leveComment1'+DbNumberID）.fadeOut（'slow'）；
$（'.editpostwrapper'）.show（）；
});
});});

我的HTML/PHP脚本

    <div class="content_wrapper">
<ul id="responds">
<?php
//include db configuration file
include_once("connect/cons.php");

//MySQL query

$results = $mysqli->query("SELECT pagepost.comment,pagepost.regid,pagepost.id,register.id as regid, register.photo,register.lname,register.fname,
        UNIX_TIMESTAMP() -pagepost.date AS CommentTimeSpent FROM pagepost inner join register on pagepost.regid=register.id order by pagepost.id desc");


//get all records from add_delete_record table
while($row = $results->fetch_assoc())
{



  echo '<li id="item_'.$row["id"].'">';

  echo'<table width="100%" border="0" cellspacing="1" cellpadding="1">


    <tr>
    <td width="5%" align="left" valign="top">

    <img  src="profilepics/'.$row['photo'].'" class="photothumbpost">
    </td>
    <td width="0" align="left" valign="top" ><span class="colorpurple">'.  ucwords(strtolower($row['lname'])). " " . ucwords(strtolower($row['fname'])). '</span> </br> <span class="datetimecolor">'.

    date("F j, Y h:i:s A" ,strtotime($row['date'])).'</span>';

$days2 = floor($row['CommentTimeSpent'] / (60 * 60 * 24));
        $remainder = $row['CommentTimeSpent'] % (60 * 60 * 24);
        $hours = floor($remainder / (60 * 60));
        $remainder = $remainder % (60 * 60);
        $minutes = floor($remainder / 60);
        $seconds = $remainder % 60;

if($days2 > 0)
            echo date('F d Y', $row['date']);
            elseif($days2 == 0 && $hours == 0 && $minutes == 0)
            echo "few seconds ago";     
            elseif($days2 == 0 && $hours == 0)
            echo $minutes.' minutes ago';
            else
            echo "few seconds ago"; 



'</td>
<td width="2%" align="right" valign="top">';



    if($row['regid']==$_SESSION['regid'])
    {

    echo '<div class="del_wrapper">
    <!---->
    <div class="btn-group btn-group-left" >

  <span  class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="background-color:transparent; border:none;background-image:none;">
   <img src="icons/dropdown.png"  title="Options" border="0" />

  </span>
 <ul class="dropdown-menu" role="menu" style="width:150px; float:left;border:none;" >
   <li style="width:150px; text-align:center;border:none;"><a href="#">Hide this for me</a></li>
  <li style="width:150px; text-align:center;border:none;"> <a href="" class="del_button" id="del-'.$row["id"].'"><span class="glyphicon glyphicon-floppy-remove" aria-hidden="true"><font face="Arial">&nbsp;Delete</font></span></a></li>
  <li style="width:150px; text-align:center;border:none;"> <a href="#" class="edit_button" id="post-'.$row["id"].'" ><span class="glyphicon glyphicon-pencil" aria-hidden="true"><font face="Arial">&nbsp;Edit Post</font></span></a></li>

  <li style="width:150px; text-align:center;border:none;"> <a href="#">Like</a></li>
  <li style="width:150px; text-align:center;border:none;"> <a href="#">Unlike</a></li>
  <li class="divider" style="width:150px; text-align:center;"></li>
  <li style="width:150px; text-align:center;border:none;"><a href="#" data-toggle="modal" data-target="#gallery" >Photo Gallery</a></li>
  </ul>
</div>

<!----> 



    </div>';





    }?>
    <?php 

    echo'</td>
  </tr>

  <tr>

    <td width="0" align="left" valign="top" colspan="3"><div class="editpostwrapper">'. strip_tags($row['comment']). '</div> 
 <!-- end of edit post wrapper-->

<div class="editpost" style="display:none">
<textarea name="editpost" class="textareapost" cols="45" rows="2" placeholder="Edit Post" title=""></textarea>  
    </div>

<!--like dislike buttons--> 
<a href="#" >Like</a> &nbsp; . <span id="leavecomment1'.$row["id"].'" class="leavecomment">Comment</span> &nbsp; . <a href="#">Share</a>


<!--like dislike buttons--> 

</td>
  </tr>
</table>';


?>

<div id="commentresponds"> 
<?php 
$resultscomment= $mysqli->query("SELECT comment.id,comment.comment,comment.date,comment.pagepostid,pagepost.id,register.fname,register.lname,register.photo from comment 
inner join pagepost on comment.pagepostid=pagepost.id 
inner join register on comment.regid=register.id Where comment.pagepostid='$row[id]' order by comment.id desc");


while($rows = $resultscomment->fetch_assoc())
{

     echo '<span id="item_'.$rows["id"].'"/>';

  echo'<table width="100%" border="0" cellspacing="1" cellpadding="1">

    <tr>
    <td width="5%" align="left" valign="top">

    <img src="profilepics/'.$rows['photo'].'" class="photothumbpost">
    </td>
    <td width="0" align="left" valign="top" ><span class="colorpurple">'.  ucwords(strtolower($rows['lname'])). " " . ucwords(strtolower($rows['fname'])). '</span> </br> <span class="datetimecolor">'.date("F j, Y h:i:s A" ,strtotime($rows['date'])).'</span>
</td>
<td width="2%" align="right" valign="top">

    <div class="del_wrapper"><a href="" class="del_button" id="del-'.$rows["id"].'">
    <img src="icons/dropdown.png"  title="Delete post" border="0" /></a></div>

    </td>
  </tr>
  <tr>

    <td width="0" align="left" valign="top" colspan="3">'. $rows['comment']. '

<!--like dislike buttons--> 



<!--like dislike buttons--> 

</td>
  </tr>
</table>';




    //echo'<img src="profilepics/'.$rows['photo'].'" class="photothumbpost">';
//echo $rows['comment']. '<br/>';
}

?>
 <form id="form1" name="form1" method="post" action="processinsertcomment.php">

    <input type="hidden" name="pagepostid"  id="pagepostid" class="pagepostid" value="<?php echo $row['id'] ?>" />
    <input type="hidden" name="regid"  id="regid" value="<?php echo $_SESSION['regid'] ?>" />
    <input type="hidden" name="postcomment"  id="postcomment" value="<?php echo $row['comment'] ?>" />
   <div id="leavecomment1<?php $row["id"] ?>" style="display:none">
    <textarea name="txtcomment" id="txtcomment<?php $row['id']?>" cols="45" rows="2" placeholder="Comment here" title="Your comment here" class="textareacomment"></textarea>
  <br />
  <input type="submit" name="btncomment" id="btncomment" value="Comment"  class="buttonpost" />
<img src="images/ajax.gif" id="LoadingImage" style="display:none" />
</div>
 </form>
<?php
echo'</div>';
echo '</li>';







}

//close db connection
$mysqli->close();



?>
</ul>  

</div>

这是因为在HTML中有多个文本区域具有相同的
id
属性，即
txtcoment
。
您应该尝试给每个textarea、comments和anchor标记一个唯一的id

使用
id=“txtcoment.”.$row[“id”]。“
和
id=“levecomment.”.$row[“id”]”

注意：当一个HTML页面有多个具有相同id的DOM元素时，它
将遍历最后一个并返回
元素

解决方案

我已经找到了我的代码的问题，
我并没有正确地传递类leavecomment的span id，所以click事件并没有看到分配给id的值，下面是分配给id的正确动态值

<a href="#" >Like</a> &nbsp; . <span id="'.$row["id"].'" class="leavecomment">Comment</span> &nbsp; . <a href="#">Share</a>

。评论。

头标记之间的JQUERY/JS

    $(document).ready(function()
  {


//link to click  action
$('.leavecomment').click(function()
{


 var divname= this.id; //this will automatically represent the value stored in the span id <span id="'.$row["id"].'" class="leavecomment">Comment</span> as seen in the html/php page                  

    $('#leavecomment1'+divname).fadeIn('slow'); 
                $('#txtcomment'+divname).focus();



    });
});

</script>

$（文档）.ready（函数（）
{
//链接到单击操作
$（'.leveComment'）。单击（函数（）
{
var divname=this.id；//这将自动表示存储在span id注释中的值，如html/php页面中所示
$（'#leveComment1'+divname）.fadeIn（'slow'）；
$（'#txtcoment'+divname）.focus（）；
});
});

PHP页面

    <div class="content_wrapper">
<ul id="responds">
<?php
//include db configuration file
include_once("connect/cons.php");

//MySQL query

$results = $mysqli->query("SELECT pagepost.comment,pagepost.regid,pagepost.id,register.id as regid, register.photo,register.lname,register.fname,
        UNIX_TIMESTAMP() -pagepost.date AS CommentTimeSpent FROM pagepost inner join register on pagepost.regid=register.id order by pagepost.id desc");


//get all records from add_delete_record table
while($row = $results->fetch_assoc())
{




  echo '<li id="item_'.$row["id"].'">';

  echo'<table width="100%" border="0" cellspacing="1" cellpadding="1">


    <tr>
    <td width="5%" align="left" valign="top">

    <img  src="profilepics/'.$row['photo'].'" class="photothumbpost">
    </td>
    <td width="0" align="left" valign="top" ><span class="colorpurple">'.  ucwords(strtolower($row['lname'])). " " . ucwords(strtolower($row['fname'])). '</span> </br> <span class="datetimecolor">'.

    date("F j, Y h:i:s A" ,strtotime($row['date'])).'</span>';

$days2 = floor($row['CommentTimeSpent'] / (60 * 60 * 24));
        $remainder = $row['CommentTimeSpent'] % (60 * 60 * 24);
        $hours = floor($remainder / (60 * 60));
        $remainder = $remainder % (60 * 60);
        $minutes = floor($remainder / 60);
        $seconds = $remainder % 60;

if($days2 > 0)
            echo date('F d Y', $row['date']);
            elseif($days2 == 0 && $hours == 0 && $minutes == 0)
            echo "few seconds ago";     
            elseif($days2 == 0 && $hours == 0)
            echo $minutes.' minutes ago';
            else
            echo "few seconds ago"; 



'</td>
<td width="2%" align="right" valign="top">';





    if($row['regid']==$_SESSION['regid'])
    {

    echo '<div class="del_wrapper">
    <!---->
    <div class="btn-group btn-group-left" >

  <span  class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="background-color:transparent; border:none;background-image:none;">
   <img src="icons/dropdown.png"  title="Options" border="0" />

  </span>
 <ul class="dropdown-menu" role="menu" style="width:150px; float:left;border:none;" >
   <li style="width:150px; text-align:center;border:none;"><a href="#">Hide this for me</a></li>
  <li style="width:150px; text-align:center;border:none;"> <a href="" class="del_button" id="del-'.$row["id"].'"><span class="glyphicon glyphicon-floppy-remove" aria-hidden="true"><font face="Arial">&nbsp;Delete</font></span></a></li>
  <li style="width:150px; text-align:center;border:none;"> <a href="#" class="edit_button" id="post-'.$row["id"].'" ><span class="glyphicon glyphicon-pencil" aria-hidden="true"><font face="Arial">&nbsp;Edit Post</font></span></a></li>

  <li style="width:150px; text-align:center;border:none;"> <a href="#">Like</a></li>
  <li style="width:150px; text-align:center;border:none;"> <a href="#">Unlike</a></li>
  <li class="divider" style="width:150px; text-align:center;"></li>
  <li style="width:150px; text-align:center;border:none;"><a href="#" data-toggle="modal" data-target="#gallery" >Photo Gallery</a></li>
  </ul>
</div>

<!----> 



    </div>';





    }?>
    <?php 

    echo'</td>
  </tr>

  <tr>

    <td width="0" align="left" valign="top" colspan="3"><div class="editpostwrapper">'. strip_tags($row['comment']). '</div> 
 <!-- end of edit post wrapper-->

<div class="editpost" style="display:none">
<textarea name="editpost" class="textareapost" cols="45" rows="2" placeholder="Edit Post" title=""></textarea>  
    </div>

**<!--THIS IS THE LINK TO CLICK,HERE WE HAVE LIKE,**COMMENT**, SHARE,-->**  

<a href="#" >Like</a> &nbsp; . <span id="'.$row["id"].'" class="leavecomment">Comment</span> &nbsp; . <a href="#">Share</a>


**<!--THIS IS THE END LINK TO CLICK,HERE WE HAVE LIKE,**COMMENT**, SHARE,-->**  

</td>
  </tr>
</table>';


?>

<div id="commentresponds"> 
<?php 
$resultscomment= $mysqli->query("SELECT comment.id,comment.comment,comment.date,comment.pagepostid,pagepost.id,register.fname,register.lname,register.photo from comment 
inner join pagepost on comment.pagepostid=pagepost.id 
inner join register on comment.regid=register.id Where comment.pagepostid='$row[id]' order by comment.id desc");


while($rows = $resultscomment->fetch_assoc())
{

     echo '<span id="item_'.$rows["id"].'"/>';

  echo'<table width="100%" border="0" cellspacing="1" cellpadding="1">

    <tr>
    <td width="5%" align="left" valign="top">

    <img src="profilepics/'.$rows['photo'].'" class="photothumbpost">
    </td>
    <td width="0" align="left" valign="top" ><span class="colorpurple">'.  ucwords(strtolower($rows['lname'])). " " . ucwords(strtolower($rows['fname'])). '</span> </br> <span class="datetimecolor">'.date("F j, Y h:i:s A" ,strtotime($rows['date'])).'</span>
</td>
<td width="2%" align="right" valign="top">

    <div class="del_wrapper"><a href="" class="del_button" id="del-'.$rows["id"].'">
    <img src="icons/dropdown.png"  title="Delete post" border="0" /></a></div>

    </td>
  </tr>
  <tr>

    <td width="0" align="left" valign="top" colspan="3">'. $rows['comment']. '

<!--like dislike buttons--> 



<!--like dislike buttons--> 

</td>
  </tr>
</table>';


    //THIS IS THE MAJOR FOCUS DISPLAYING THE COMMENT ON CLICKING THE COMMENT LABEL AS SEEN ABOVE
}

?>
 <form id="form1" name="form1" method="post" action="processinsertcomment.php">

    <input type="hidden" name="pagepostid"  id="pagepostid" class="pagepostid" value="<?php echo $row['id'] ?>" />
    <input type="hidden" name="regid"  id="regid" value="<?php echo $_SESSION['regid'] ?>" />
    <input type="hidden" name="postcomment"  id="postcomment" value="<?php echo $row['comment'] ?>" />
   <div id="leavecomment1<?php echo $row["id"] ?>" class="leavecomment1<?php echo $row["id"] ?>" style="display:none" >
    <textarea name="txtcomment" id="txtcomment<?php echo $row['id']?>" cols="45" rows="2" placeholder="Comment here" title="Your comment here" class="textareacomment"></textarea>
  <br />
  <input type="submit" name="btncomment" id="btncomment" value="Comment"  class="buttonpost" />
<img src="images/ajax.gif" id="LoadingImage" style="display:none" />
</div>
 </form>
<?php
echo'</div>';
echo '</li>';







}

//close db connection
$mysqli->close();



?>
</ul>

</div>



正如您所看到的，我已经将所有唯一id附加到div，请帮助检查js代码，看看您是否能够找出我没有做对的事情