Question

我正在开发一个像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 =“＃”。这会奏效。这会将链接的fefault文本设置为REPLY n DELETE，并在单击“REPLY”时将它们更改为POST n BACK。添加代码，以便在单击“REPLY”时执行其他任何操作 $（ '＃id_of_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();
        }
    });
});

我们使用：

而不是让$('#reply')和$('#delete')仅获取具有该ID的第一个元素，因为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 ：您无法在//dont check this这样的html中进行评论，而是使用：）

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");

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

3 个答案: