触发jQuery中多个第n个子项的悬浮状态的最有效方法

时间：2018-09-05 11:22:17

标签： jquery html css css-selectors

我有一张桌子，其中第一个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>

3 个答案:

答案 0 :(得分：1)

无需使用Javascript。简单的CSS将为您完成此任务。

table tr:first-child > td:hover {
  background-color: red;
  color: white;
}
<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<br> &nbsp;
        </div>
      </td>
      <td width="240">
        <div>3&nbsp;Zenders&nbsp;(AXIWI AT-320 LD)</div>
        <div>3&nbsp;Sportheadsets</div>
        <div>• Transportkoffer<br> &nbsp;
        </div>
      </td>
      <td width="240">
        <div>5 Zenders (AXIWI AT-320 LD)</div>
        <div>5 Sportheadsets</div>
        <div>Transportkoffer<br> &nbsp;
        </div>
      </td>
    </tr>
  </tbody>
</table>

答案 1 :(得分：1)

我将使用index()获取该行中当前单元格的索引，然后使用该索引在第一行中添加和删除一个类：

var table = $('.table-equal-compare-3'),
    firstRowTDs = table.find('tr').eq(0).children();  // cache the first row tds for better performance
    
table.find('td').hover(function() {
  var index = $(this).index();
  
  if (index < 3) {  // only do this to first three columns
    firstRowTDs
      .removeClass('hovered') // remove all classes
      .eq(index)    // get the item that matches the index of the hovered element
      .addClass('hovered');   // add top border
  }
}, 
function () {
  firstRowTDs.removeClass('hovered');  // remove top border
});
.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.table-equal-compare-3 tr:first-child td {
  border-top: solid 2px transparent;
  -webkit-transition: border-top-color 500ms linear;
  -ms-transition: border-top-color 500ms linear;
  transition: border-top-color 500ms linear;
}

table.table-equal-compare-3 tr:first-child td.hovered {
  border-color: #000;
}
<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-003</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<br> &nbsp;
        </div>
      </td>
      <td width="240">
        <div>3&nbsp;Zenders&nbsp;(AXIWI AT-320 LD)</div>

        <div>3&nbsp;Sportheadsets</div>

        <div>• Transportkoffer<br> &nbsp;
        </div>
      </td>
      <td width="240">
        <div>5 Zenders (AXIWI AT-320 LD)</div>

        <div>5 Sportheadsets</div>

        <div>Transportkoffer<br> &nbsp;
        </div>
      </td>
      <td width="240">
        <div>extra column that doesn't have hover on top</div>
      </td>
    </tr>

  </tbody>
</table>

答案 2 :(得分：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>

相关问题
最新问题