php - 使用 javascript 单击链接时更改链接的文本

Question

我正在用 php 开发一个像 facebook 这样的社交网站。我有一个页面用于显示带有两个链接的用户消息，即reply在delete收件箱中每条消息的右下角。我的问题是，当我单击reply链接时，两个链接的文本都应更改为post和。back我的 html 代码是这样的：

<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();
        }
    });
});

它适用于第一条消息。如果收件箱中有多条消息，单击除第一条以外的任何消息的回复按钮时，不会发生任何操作。

Answer 1

尝试这个...

<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="#"。这将起作用。这会将链接的错误文本设置为 REPLY n DELETE，并在单击“REPLY”时将其更改为 POST n BACK。在 $('#id_of_reply').click(function(){ 中单击“REPLY”时为您想要执行的任何其他操作添加代码
并将任何内容放在此函数之外具有默认值。

Answer 2

问题是，当你这样做时，你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 应该是唯一的，而不是 get $('#reply')and $('#delete')which 只获取具有该 id 的第一个元素，我们使用：

$(this).parent().find('> .delete');

它这样做：

• 获取当前元素 -<a href="" class="reply">reply</a>
• 找到它的父母——<div class="msgutil"></div>
• 查找具有.delete类的元素 -<a href="" class="delete">delete</a>

您应该对具有相同 ID 的所有其他元素执行相同的操作。

PS1：正如你所看到的，我用 替换了所有的getElementById('something')，$('#something')如果你使用像 jQuery 这样的很棒的库，请一直使用它。

PS2：你不能在 html 中做评论，//dont check this而不是使用<!-- dont check this -->:)

Answer 3

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

并在回复点击事件中获取row_msg_id并替换两个链接，因为单独更改文本并不好，它仍然可以作为回复和删除事件......所以更改两个网址，

$("#msglinks_"+row_msg_id).html("url links");