我正在php中开发一个类似facebook的社交网站。我有一个页面，用于为用户显示带有两个链接的消息，即收件箱中每个消息的右下角的reply和delete。我的问题是，当我单击reply链接时，两个链接的文本都应该更改为post和back
<div class="msgutil">
<a href="" id="reply" >reply</a>
<a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>" id="delete">delete</a>//dont check this
</div><!--end msgutil-->
我的javascript代码如下：
$(document).ready(function()
{
//action to be done if link name is reply which is present below the message box
$("#reply").click(function(e)
{
//action to be done if link name has changed from "reply" to "post" which is present below the message box
if(document.getElementById('reply').innerHTML=="reply")
{
document.getElementById('reply').innerHTML="Post";
document.getElementById('delete').innerHTML="Back";
var idstr = document.getElementById('sender_id').value;
$('<br/><form id="msgreply" name="msgreply" action="post_messages.php" method="post"> <label for="txt_subject"><strong>Subject:</strong></label><br/><input type="text" id="txt_subject" name="txt_subject"/><br/><label for="txt_message"><strong>Message:</strong></label><br/><input type="hidden" id="to_id" name="to_id" value="'+idstr+'"/><textarea name="txt_message" id="replyfield"></textarea></form>').insertAfter("#temp");
e.stopPropagation();
e.preventDefault();
}
else if(document.getElementById('reply').innerHTML=="Post")
{
var message = document.getElementById('msgreply');
message.submit();
e.stopPropagation();
e.preventDefault();
}
});
//action to be done if link name is delete which is present below the message box
$("#delete").click(function(e)
{
//action to be done if link name has changed from "reply" to "post" which is present below the message box
if(document.getElementById('delete').innerHTML=="Back")
{
$("#msgreply").remove();
document.getElementById('reply').innerHTML="reply";
document.getElementById('delete').innerHTML="delete";
e.stopPropagation();
e.preventDefault();
}
});
});
它适用于第一条消息。如果收件箱中有多封邮件，单击除第一封邮件以外的任何邮件的回复按钮时，都不会执行任何操作。
<div class="msgutil" id="msglinks_<?php echo $row_msg_id;?>">
<a href="">reply</a>
<a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>" class="delete">delete</a><!-- dont check this -->
</div><!--end msgutil-->
在reply-click事件中，获取rowmsg_id并替换两个链接，因为单独更改文本是不好的，它仍然可以作为reply-delete事件。。。所以更改url和
$("#msglinks_"+row_msg_id).html("url links");
问题是，当您执行document.getElementById('reply')时，它将为您获得带有id='reply'的第一个元素。
你可以这样做：
<div class="msgutil">
<a href="" class="reply" >reply</a>
<a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>" class="delete">delete</a><!-- dont check this -->
</div><!--end msgutil-->
您的代码将类似于：
$(document).ready(function()
{
//action to be done if link name is reply which is present below the message box
$(".reply").click(function(e)
{
var el = $(this);
//action to be done if link name has changed from "reply" to "post" which is present below the message box
if(el.text() == "reply") // Changed from innerHtml to the text() method
{
var deleteEl = $(this).parent().find('> .delete'); // Gets the delete element relatively to this one
el.text("Post");
deleteEl.text("Back");
var idstr = $('#sender_id').value;
$('<br/><form id="msgreply" name="msgreply" action="post_messages.php" method="post"> <label for="txt_subject"><strong>Subject:</strong></label><br/><input type="text" id="txt_subject" name="txt_subject"/><br/><label for="txt_message"><strong>Message:</strong></label><br/><input type="hidden" id="to_id" name="to_id" value="'+idstr+'"/><textarea name="txt_message" id="replyfield"></textarea></form>').insertAfter("#temp");
e.stopPropagation();
e.preventDefault();
}
else if(el.html() == "Post")
{
var message = $('#msgreply');
message.submit();
e.stopPropagation();
e.preventDefault();
}
});
//action to be done if link name is delete which is present below the message box
$(".delete").click(function(e)
{
var el = $(this);
//action to be done if link name has changed from "reply" to "post" which is present below the message box
if(el.text() == "Back")
{
var replyEl = $(this).parent().find('> .reply'); // Gets the reply element relatively to this one
$("#msgreply").remove();
replyEl.text("reply");
el.text("delete");
e.stopPropagation();
e.preventDefault();
}
});
});
由于id应该是唯一的，因此我们不获取只获取具有该id的第一个元素的$('#reply')和$('#delete')，而是使用：
$(this).parent().find('> .delete');
它这样做：
- 取当前元素-
<a href="" class="reply">reply</a> - 查找它的父级-
<div class="msgutil"></div> - 查找具有
.delete类-<a href="" class="delete">delete</a>的元素
您应该对具有相同id的所有其他元素执行相同的操作。
PS1:正如你所看到的，我用$('#something')替换了所有的getElementById('something')，如果你一直在使用像jQuery这样的很棒的库的话。
PS2:您不能像//dont check this那样在html中进行注释，而是使用<!-- dont check this -->:(
试试这个。。。
<script>
$(document).ready(function() {
$('#id_of_reply').click(function(){
$('#id_of_reply').html("POST");
$('#id_of_delete').html("BACK");
});
}
</script>
<a href="#" id="id_of_reply" >REPLY</a> <br><br>
<a href="" id="id_of_delete">DELETE</a>
在href中，放入href="#"。这会奏效的。这将把链接的fefault文本设置为REPLY n DELETE，并在单击"REPLY"时将其更改为POST n BACK。在中点击"回复"，添加你想做的任何其他事情的代码$('#id_of_reply'(.单击(function((｛
并将任何具有默认值的内容放在此函数之外。