Question

我的html表格中有按钮。当我点击按钮时，我想将链接按钮改为＆＃34; Un-Extend＆＃34;然后我点击＆＃34; Un-Extend＆＃34;切换回上一个按钮。我怎样才能做到这一点？

<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");
        }
    });

Answer 2

您可以执行以下操作： DEMO

$('button').click(function(){
    if($(this).text() == "Extend") {
        $(this).text('Un-Extend');
    } else {
        $(this).text('Extend');
  }
});

Answer 3

您的意思是将button代码更改为a代码？

由于按钮元素在循环迭代中，您不能使用相同的ID(s)名称，而是将classname btnExtend （您将其命名），并注册单击处理程序，如下所示：

$(document).on('click', '.btnExtend', function() {
  $(this).text(($(this).text() == 'Extend' ? 'Un-Extended' : 'Extend'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnExtend" type="button" class="btn btn-info btn-xs btnExtend" data-toggle="modal" data-target="#saveExtend" data-value='"@item.CommitteeMasterCustomer"'>Extend</button>

Answer 4

您可能想尝试一下。

$（ “＃btnExtend”）。在（ “点击”，函数（）{

$(this).text($(this).text() == 'Extend' ? 'Un-Extend': 'Extend');

}）;

Answer 5

更改为以下代码并将以下jquery的功能应用到代码中：

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"' onclick ="showhide(this);" >Extend</button>
            </td>
         </tr>

        }

<script>  function showhide(victim)
    {
        var text = $(victim).closest('td').find('input:button').text();

        if (text == "Extend") {
            $(victim).closest('td').find('input:button').text('Un-Extend');
        }
        else {
            $(victim).closest('td').find('input:button').text('Extend');
        }

    } </script>

更改按钮链接到html表？

5 个答案: