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

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>

Answer 2

对于<input>按钮，就可以传递给.val()方法来检查当前值，并返回新值的函数来进行相应的设置：

$(".Reply").val(function(i, value){ 
    return (value=="Replie(s)") ? "Hide Replie(s)" : "Replie(s)" 
}); 

---

对于<button>元素，可以使用.text()方法做同样的事情。

Answer 3

只需添加到您的JS（而不是你的//注释行）：

$(this).val($(this).val() == "Replie(s)" ? "Hide Replies" : "Replie(s)"); 

http://jsfiddle.net/the_julo/tnx5gd6u/2/