jquery - 在 jquery 中触发多个第 n 个子项的悬停状态的最有效方法

Question

我有一个表格，其中第一个 tr 中的第一个、第二个和第三个 td 的顶部边框需要在悬停相应的 td 时更改颜色。

我的限制是我不能再使用类或 ID，因为这些表格样式将由那些在编写代码方面几乎没有经验的人使用，他们只需在我们的 cms 中选择一个表格并向其添加一个类和 id .

我的代码可以正常工作(请参阅底部代码片段)，但我想为以下子对象尽可能高效地编写代码。

我可以这样做:

$("#table1 td:nth-child(1)").hover(function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(1)").addClass("table-compare-border-hover");
}, function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(1)").removeClass("table-compare-border-hover");
});

$("#table1 td:nth-child(2)").hover(function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(2)").addClass("table-compare-border-hover");
}, function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(2)").removeClass("table-compare-border-hover");
});

$("#table1 td:nth-child(3)").hover(function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(3)").addClass("table-compare-border-hover");
}, function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(3)").removeClass("table-compare-border-hover");
});

但这似乎效率非常低，特别是因为页面最多可以有 4 个表格，那么我需要为 #table1、#table2、#table3 和 #table4 重复上面的代码

下面是我的完整代码

$("#table1 td:nth-child(1)").hover(function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(1)").addClass("table-compare-border-hover");
}, function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(1)").removeClass("table-compare-border-hover");
});

.table-equal-compare-3 tr:nth-child(1) {
  border-top: solid 2px #e6e6e6;
}

table.table-equal-compare-3 td {
  text-align: center;
  padding: 8px;
  vertical-align: bottom;
  padding-top: 10px;
}

.table-compare-border-hover {
  border-top: solid 2px #000;
  -webkit-transition: border-top-color 500ms linear;
  -ms-transition: border-top-color 500ms linear;
  transition: border-top-color 500ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" class="table-equal-compare-3" id="table1">
  <tbody>
    <tr>
      <td style="text-align: center;"><strong>Axitour AXIWI REF-001</strong></td>
      <td style="text-align: center;"><strong>Axitour AXIWI REF-002</strong></td>
      <td style="text-align: center;"><strong>Axitour AXIWI REF-004</strong></td>
    </tr>
    <tr>
      <td width="240">
        <div>2 Zenders&nbsp;(AXIWI AT-320 LD)</div>
        <div>2 Sportheadsets</div>
        <div>Transportkoffer</div>
      </td>
      <td width="240">
        <div>3&nbsp;Zenders&nbsp;(AXIWI AT-320 LD)</div>
        <div>3&nbsp;Sportheadsets</div>
        <div>• Transportkoffer</div>
      </td>
      <td width="240">
        <div>5 Zenders (AXIWI AT-320 LD)</div>
        <div>5 Sportheadsets</div>
        <div>Transportkoffer</div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用更合适的 CSS 选择器。下面是一个纯CSS3选择器:

td:nth-child(-n + 3)

...匹配作为其父级的第一个、第二个和第三个子级的所有 td 元素。您的代码可以简化如下:

$("#table1 td:nth-child(-n + 3)").hover(function() {
  var n = $(this).index() + 1;
  $("#table1 tr:nth-child(1) td:nth-child(" + n + ")").addClass("table-compare-border-hover");
}, function() {
  var n = $(this).index() + 1;
  $("#table1 tr:nth-child(1) td:nth-child(" + n + ")").removeClass("table-compare-border-hover");
});

.table-equal-compare-3 td {
  border-top: solid 2px transparent;
  transition: border-top-color 500ms linear;
  padding: 10px 20px;
}

td.table-compare-border-hover {
  border-top-color: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" class="table-equal-compare-3" id="table1">
  <tbody>
    <tr>
      <td>Label 1</td>
      <td>Label 2</td>
      <td>Label 3</td>
      <td>Label 4</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
    </tr>
  </tbody>
</table>