使用javascript更改鏈接文本點擊鏈接

Question

我正在開發一個社交網站，如facebook在php中。我有一個頁面，用於顯示帶有兩個鏈接的用戶的消息，即收件箱中每條消息的右下角的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」）添加代碼。點擊（函數（）{
並把任何有這項功能之外的默認值。

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改用<!-- 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和更換兩個環節，因爲單獨更改文本不會好，它仍然會如果有人downvotes工作作爲答覆，並刪除事件......所以同時改變網址，

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