javascript - 如何在每次单击按钮时更改按钮的文本值？

Question

下面是 jquery 代码和表格。 jquery 代码是在每次单击回复按钮时切换名为“divrep”的 div 元素。我想要的是我希望回复按钮在每次单击时更改文本值。因此，最初，按钮的文本值为“Replie(s)”。我想在单击时将其更改为“隐藏回复”，并在再次单击时再次更改为“回复”。如何在我的代码中添加脚本来执行此操作？谢谢...

Jquery:

$(function () {
  $('.Reply').click(function () {
  $(this).closest('p').next('.divrep').toggle(!$(this).closest('p').next('.divrep').is(":visible"));
   // How to insert a code here to change the text value of the reply button in every click?
 });
});

HTML:

<table id="mytable">  

    <tr >
        <td class="tdstyle" >

  <div style="font-weight:bold;">  @Html.DisplayFor(modelItem => item.name) </div> 

   <p class="comment more" style ="white-space: pre-line; margin-top:0px;margin-bottom:0px; border-radius: 4px 4px 4px 4px; max-width :500px; min-height :5px;  display :block; background-color: #CCCCFF">  @Html.DisplayFor(modelItem => item.comment) </p>
  <p> <input type="button" id="like" name="like" value="Like" style="color:blue;border:0px;background-color:inherit;cursor:pointer" /> <input type="button" class ="Reply" name="Reply" value="Replie(s)"  style="margin-bottom:0px;color:blue;border:0px;background-color:inherit;cursor:pointer" /></p>                                                                                                                                 
   <div id="divReply" class ="divrep" style="display:none; position:relative;left:50px; overflow:auto;margin-top:0px;margin-bottom:0px">
           <table>

                 <tr >

                     <td >
                         <div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item2.name) </div> 

                     <p class="comment more" style ="margin-top:0px;margin-bottom:0px;white-space:pre-line; border-radius: 4px 4px 4px 4px; max-width :445px; min-height :5px;  display :block; background-color: #CCCCFF;">@Html.DisplayFor(modelItem => item2.reply)  </p>

                   </td>
                 </tr>

            </table>      

   <div> 
       <div class="editor-field" style="display:none; margin-bottom:5px;margin-top:5px">  
          <input type="text" id="comidvalue" name="id" class="id" value="@Html.DisplayFor(modelItem => item.Id)" />
       </div>

       <br />
       <input type="text" id="namerep" name="name" class="name" style="width:445px;resize:none" />

      <br />
      <textarea id="reply" name="reply" class="reply" style="width:445px;height:100px;resize:none" ></textarea>

         <br />

       <input type="button" class="postrep" value="Post Reply" name="butname" style="cursor:pointer" /> 

     </div>
            <br />

  </div>
        </td>       
    </tr>


</table>

Answer 1

您可以尝试使用divrep的可见性状态设置文本值

$(function () {
    $('.Reply').click(function () {
        var $divrep = $(this).closest('p').next('.divrep').toggle(!$(this).closest('p').next('.divrep').is(":visible"));
        $(this).val($divrep.is(':visible') ? 'Hide Replie(s)' : 'Replie(s)')
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="mytable">  
    
    <tr >
        <td class="tdstyle" >
            
            <div style="font-weight:bold;">  @Html.DisplayFor(modelItem => item.name) </div> 
            
            <p class="comment more" style ="white-space: pre-line; margin-top:0px;margin-bottom:0px; border-radius: 4px 4px 4px 4px; max-width :500px; min-height :5px;  display :block; background-color: #CCCCFF">  @Html.DisplayFor(modelItem => item.comment) </p>
            <p> <input type="button" id="like" name="like" value="Like" style="color:blue;border:0px;background-color:inherit;cursor:pointer" /> <input type="button" class ="Reply" name="Reply" value="Replie(s)"  style="margin-bottom:0px;color:blue;border:0px;background-color:inherit;cursor:pointer" /></p>                                                                                                                                 
            <div id="divReply" class ="divrep" style="display:none; position:relative;left:50px; overflow:auto;margin-top:0px;margin-bottom:0px">
                <table>
                    
                    <tr >
                        
                        <td >
                            <div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item2.name) </div> 
                            
                            <p class="comment more" style ="margin-top:0px;margin-bottom:0px;white-space:pre-line; border-radius: 4px 4px 4px 4px; max-width :445px; min-height :5px;  display :block; background-color: #CCCCFF;">@Html.DisplayFor(modelItem => item2.reply)  </p>
                            
                        </td>
                    </tr>
                    
                </table>      
                
                <div> 
                    <div class="editor-field" style="display:none; margin-bottom:5px;margin-top:5px">  
                        <input type="text" id="comidvalue" name="id" class="id" value="@Html.DisplayFor(modelItem => item.Id)" />
                    </div>
                    
                    <br />
                    <input type="text" id="namerep" name="name" class="name" style="width:445px;resize:none" />
                    
                    <br />
                    <textarea id="reply" name="reply" class="reply" style="width:445px;height:100px;resize:none" ></textarea>
                    
                    <br />
                    
                    <input type="button" class="postrep" value="Post Reply" name="butname" style="cursor:pointer" /> 
                    
                </div>
                <br />
                
            </div>
        </td>       
    </tr>
</table>