Aide JQuery, Comment masquer tous les boutons dans JQuery

Question

J'essaie de créer une section de demande/réponse dans mon projet.
Je veux atteindre ces fonctionnalités dans ce code (que je ne suis pas en mesure de mettre en œuvre, alors les gars s'il vous plaît aidez-moi):
1> Lorsque l'utilisateur clique sur le bouton de réponse; l'autre zone de réponse (zone de texte + bouton) doit être masquée (cela signifie qu'à la fois une seule zone de réponse doit être visible pour l'utilisateur).
2> lorsque l'utilisateur clique sur le bouton de réponse, la zone de texte se concentre et la page glisse vers le bas (supposons que la réponse de l'utilisateur 10 soit automatiquement définie sur la zone de texte 10).

Voici mes à ce jour les gars de code:

//method call on the click of reply link. 
    function linkReply_Clicked(issueId) {  

     Id = issueId; 
     textId = "text_" + issueId + count; 
     btnReply = "btnReply_" + issueId + count; 
     btnCancel = "btnCancel_" + issueId + count; 

     var textareasArray = document.getElementsByTagName("textarea"); 
     var btnArray = document.getElementsByTagName("input"); 

     for (i = 0; i < textareasArray.length; i++) { 
      textareasArray[i].style.display = "none"; 
      btnArray[i].style.display = "none"; 
     } 

     var str = "<table cellpadding='3' cellspacing='0' width='58%'>"; 
     str += "<tr><td valign='top' align='left'>"; 
     str += "<textarea id=" + textId + " rows='5' cols='60'></textarea>"; 
     str += "</td></tr>"; 
     str += "<tr><td valign='top' align='right'>"; 
     str += "<input id=" + btnReply + " type='button' onclick='btnReply_Clicked(Id ,textId)' value='Reply' />&nbsp;"; 
     str += "<input id=" + btnCancel + " type='button' onclick='btnCancel_Clicked(Id ,textId)' value='Cancel' />&nbsp;"; 
     str += "</td></tr>"; 
     str += "</table>"; 
     document.getElementById("divOuter_" + issueId).innerHTML = str; 
     $("#" + textId + "").focus(); 

    } 
    // submit user reply and try to hide that reply area. 
    function btnReply_Clicked(issueId, textID) { 

     var comment = document.getElementById(textID).value; 
     if (comment != '') { 
      $.getJSON("/Issue/SaveComment", { IssueId: issueId, Comment: comment }, null); 

      $("#text_" + issueId + count).hide(); 
      $("#btnReply_" + issueId + count).hide(); 
      $("#btnCancel_" + issueId + count).hide(); 
      document.getElementById(textID).value = ''; 
      count = count + 1; 
     } 
    } 

    // cancel user reply and try to hide that reply area. 
    function btnCancel_Clicked(issueId, textId) { 

     $("#text_" + issueId + count).hide(); 
     $("#btnReply_" + issueId + count).hide(); 
     $("#btnCancel_" + issueId + count).hide(); 
     document.getElementById(textId).value = ''; 
     count = count + 1; 
    } 

Answer 1

J'ai changé un peu de cela parce que vous pouvez faire beaucoup plus facile puisque vous utilisez déjà jQuery :) Go here for the demo version

Vous pouvez remplacer tous votre code affiché avec ceci:

function linkReply_Clicked(issueId) { 
    $(".replyTable").hide();   
    var tbl = $("<table class='replyTable' cellpadding='3' cellspacing='0' width='58%'></table>"); 
    tbl.append("<tr><td valign='top' align='left'><textarea rows='5' cols='60'></textarea></td></tr>"); 
    tbl.append("<tr><td valign='top' align='right'><input type='button' class='reply' value='Reply' />&nbsp;<input type='button' class='cancel' value='Cancel' />&nbsp;</td></tr>"); 

    tbl.find(".reply").click(function() {    
     var comment = $(this).closest("table").find("textarea").val(); 
     if (comment != '') { 
      $.getJSON("/Issue/SaveComment", { IssueId: issueId, Comment: comment }, null); 
      $(this).closest("div").empty(); 
     } 
    }).siblings(".cancel").click(function() { 
     $(this).closest("div").empty(); 
    }); 

    var div = $("#divOuter_" + issueId).empty().append(tbl); 
    $('html, body').animate({ scrollTop: $(div).offset().top }, 500, 
          function() { div.find("textarea").focus(); }); 
} 

cela fait différemment les choses suivantes avec l'effet de glissement & la dissimulation et le défilement de la question:

• gestionnaires Cliquez pour les boutons de réponse/annuler sont maintenant en ligne, pas besoin de fonctions supplémentaires
• Les entrées ne sont plus les ID dont vous avez besoin pour suivre, juste trouve les relativement
• table a une classe replyTable il tous les anciens peuvent être cachés rapidement
• entrées ont des classes pour les trouver plus facile (pour lier les gestionnaires de clic)
• plus count, pas besoin :)
• ANIME le corps, fait un effet de défilement rapide à l'emplacement et concentre la zone de texte
• Supprime les anciennes tables de nettoyage