使用jquery更改元素a内的类和元素文本

Question

我有以下HTML代码

$(document).ready(function() {

  $(document).on('click', '#btnVisible', function(e) {
    // Logic Here
    return false;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr>
      <td> Column1 </td>
      <td>
        <a id="btnVisible" href=""> <i id="IconEye" class="fa fa-eye" aria-hidden="true"></i> Action </a>
      </td>
    </tr>

    <tr>
      <td> Column2 </td>
      <td>
        <a id="btnVisible" href=""> <i id="IconEye" class="fa fa-eye" aria-hidden="true"></i> Action </a>
      </td>
    </tr>

    <tr>
      <td> Column3 </td>
      <td>
        <a id="btnVisible" href=""> <i id="IconEye" class="fa fa-eye" aria-hidden="true"></i> Action </a>
      </td>
    </tr>
  </tbody>
</table>

如何点击元素a并更改i类和文本？

这些元素是动态添加的，所以当我点击图标时，我想要能够改变的类

Answer 1

你可以使用addClass和removeClass我建议不要使用Id，而是使用类选择器id来识别一个对象......

$(document).ready(function() {

  $(document).on('click', '.btnVisible', function(e) {
    // Logic Here
    $(this).find('i').addClass('my-new-class').removeClass('fa');
    return false;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr>
      <td> Column1 </td>
      <td>
        <a class="btnVisible" href=""> <i id="IconEye" class="fa fa-eye" aria-hidden="true"></i> Action </a>
      </td>
    </tr>

    <tr>
      <td> Column2 </td>
      <td>
        <a class="btnVisible" href=""> <i id="IconEye" class="fa fa-eye" aria-hidden="true"></i> Action </a>
      </td>
    </tr>

    <tr>
      <td> Column3 </td>
      <td>
        <a class="btnVisible" href=""> <i id="IconEye" class="fa fa-eye" aria-hidden="true"></i> Action </a>
      </td>
    </tr>
  </tbody>
</table>