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

How to change the text value of the button everytime it is being clicked?

本文关键字：按钮 文本 单击      更新时间：2023-09-26

下面我有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>

您可以尝试使用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>

对于<input>按钮，您可以将一个函数传递给.val()方法，该方法检查当前值并返回要相应设置的新值：

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

对于<button>元素，可以使用.text()方法执行同样的操作。

只需将其添加到JS中（而不是//注释行）：

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

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

相关文章：