javascript - 更改按钮以链接到 html 表中？

Question

我的 html 表中有按钮。当我单击按钮时，我想将链接按钮更改为“取消扩展”，然后单击“取消扩展”切换回上一个按钮。我怎样才能做到这一点？

<tbody>
   @foreach (var item in Model)
   {
       <tr>
           <td>
              @item.MemberCustomerName
           </td>
           <td>
             @item.PositionCodeDescription
           </td>
           <td>
             @item.MemberMasterCustomer
           </td>
           <td>
             @item.MemberCustomerEmail
           </td>
           <td>
             @if (item.EndDate != null)
             {
                  @item.EndDate.Value.ToShortDateString()
             }
           </td>
           <td>
                <button id="btnExtend" type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#saveExtend" data-value='"@item.CommitteeMasterCustomer"'>Extend</button>
            </td>
         </tr>

        }

Answer 1

你想要这样吗？

<button id="btnExtend" type="button" class="btn btn-info btn-xs un-extended" data-toggle="modal" data-target="#saveExtend" data-value='"@item.CommitteeMasterCustomer"'>Extend</button>

    jQuery(document).on("click",".un-extended",function(){
        if(!$(this).hasClass("extend")){
            $(this).addClass("extend");
            $(this).text("Un-Extend");
        }else{
           $(this).removeClass("extend");
            $(this).text("Extend");
        }
    });