javascript - 点击时切换 td 标签

Question

这是我的问题。我有一张 3 行的 table 。每行内都有一个隐藏的“检查”图标标签，当您单击表的行时，该标签会打开和关闭。到目前为止我已经成功地做到了这一点。我现在想做的是一次只显示一个复选标记。因此，如果已经选中一行并且单击另一行，它将取消选中之前选中的行并在新选择的行中显示复选标记。这是我当前拥有的 HTML 和 js。

$(document).ready(function () {
    var tr = $('#eventListings').find('tr');
    $(tr).click(function () {
        if ($(this).find('td i').hasClass('hide')) {
        $(this).find('td i').removeClass('hide');
    } else {
        $(this).find('td i').addClass('hide');
    }
    });
});

 <table  id="events" class="table">
      <tbody>
        <tr>
          <td>10/19 @ 4:30 PM</td>
          <td>Denver Broncos v San Francisco 49ers</td>
          <td><i class="icon-check hide"></i></td>
        </tr>
        <tr>
           <td>10/23 @ 4:25 PM</td>
          <td>Denver Broncos v San Diego Chargers</td>
          <td><i class="icon-check hide"></i></td>
        </tr>
        <tr>
           <td>11/23 @ 6:30 PM</td>
          <td>Denver Broncos v Miami Dolphins</td>
          <td><i class="icon-check hide"></i></td>
        </tr>
      </tbody>
    </table>

Answer 1

您可以使用 :visible 隐藏可见的选中项目选择器，然后使用 toggleClass() 切换单击的项目如下:

$(document).ready(function () {
    var tr = $('#events').find('tr');
    $(tr).click(function () {
        $("td i:visible").addClass('hide')
        $(this).find('td i').toggleClass('hide');
    });
});

/*For Demo Purpose*/

i::after{
  content:"checked";
}
i.hide{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table  id="events" class="table">
      <tbody>
        <tr>
          <td>10/19 @ 4:30 PM</td>
          <td>Denver Broncos v San Francisco 49ers</td>
          <td><i class="icon-check hide"></i></td>
        </tr>
        <tr>
           <td>10/23 @ 4:25 PM</td>
          <td>Denver Broncos v San Diego Chargers</td>
          <td><i class="icon-check hide"></i></td>
        </tr>
        <tr>
           <td>11/23 @ 6:30 PM</td>
          <td>Denver Broncos v Miami Dolphins</td>
          <td><i class="icon-check hide"></i></td>
        </tr>
      </tbody>
    </table>