0

私はphpでfacebookのようなソーシャルウェブサイトを開発しています。ユーザーのメッセージを表示するためのページがあり、2 つのリンクがreplyあります。つまりdelete、受信トレイ内のすべてのメッセージの右下隅にあります。私の問題は、リンクをクリックするとreply、両方のリンクのテキストが と に変わることpostです。私のbackhtmlコードは次のようになります:

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

受信トレイに複数のメッセージがある場合、最初のメッセージ以外のメッセージの返信ボタンをクリックしても、アクションは発生しません。

4

3 に答える 3

0

問題は、それを行うと最初の要素が で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:ご覧のとおり、すべてを に置き換えましたgetElementById('something')。jQuery$('#something')のような素晴らしいライブラリを使用している場合は、常にそれを使用してください。

PS2://dont check this代わりに<!-- dont check this -->:)を使用するように、html でコメントを行うことはできません。

于 2012-12-29T11:09:50.640 に答える
0

これを試して...

<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」をクリックしたときに実行したいその他のことのコードを追加し、
この関数の外側にデフォルト値を設定します。

于 2012-12-29T10:12:34.730 に答える
0 
<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を取得し、両方のリンクを置き換えます。テキストだけを変更するのは良くないため、それでも返信および削除イベントとして機能します...したがって、両方のURLを変更します。

$("#msglinks_"+row_msg_id).html("url links");
于 2012-12-29T11:22:31.497 に答える