Question

如果您将鼠标悬停在某个价格上，您会注意到价格和.catTr td的第一个孩子会突出显示。没有其他人。目标是为所选内容创建一个非常清晰的网格。

如何使用类tr.cat将相同的样式应用于列中的每个子项？

直播链接：http://www.sinsysonline.com/cameron/nick/repair/price.html

HTML：

<table id="prices">
    <tr>
        <td class="clear"></td>
    </tr>

    <tr class="head">
        <td class="clear"></td>
        <td class="head">
            <a href="desktop.html"><h3>Desktop</h3></a>
        </td>
        <td class="head">
            <a href="laptop.html"><h3>Laptop</h3></a>
        </td>
        <td class="head">
            <a href="server.html"><h3>Server</h3></a>
        </td>
    </tr>

    <tr id="priceRow">
        <td class="clear"></td>
        <td class="price">
            <h2>Testing</h2>
        </td>
        <td class="price">
            <h2>Testing</h2>
        </td>
        <td class="price">
            <h2>Testing</h2>
        </td>
    </tr>

    <tr class="catTr">
        <td class="category">
            <a href="services_hwrep.html">Hardware Repair</a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
    </tr>

    <tr class="catTr">
        <td class="category">
            <a href="services_netts.html">Network Troubleshooting</a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
    </tr>

    <tr class="catTr">
        <td class="category">
            <a href="services_netts.html">Network Troubleshooting</a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
    </tr>

    <tr class="catTr">
        <td class="category">
            <a href="services_netts.html">Network Troubleshooting</a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
    </tr>

    <tr class="catTr">
        <td class="category">
            <a href="services_netts.html">Network Troubleshooting</a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
    </tr>


    <tr class="foot">
        <td div class="clear"></td>
        <td class="foot">
                <a href="contact.html" class="action_button">Contact Us</a>
        </td>
        <td class="foot">
                <a href="contact.html" class="action_button">Contact Us</a>
        </td>
        <td class="foot">
                <a href="contact.html" class="action_button">Contact Us</a>
        </td>
    </tr>
</table>

jQuery的：

<script>
(function() { 

    $('tr.catTr td').not('.category').hover(function(){

        var priceSel = $(this).index();

        $('tr#priceRow td').eq(priceSel).addClass('price_hover');
        $('tr.catTr td').eq(priceSel).addClass('vertFilt');

        $(this).closest('tr').find('td.category').addClass('category_hover');

    },function(){

        var priceSel = $(this).index();

        $('tr#priceRow td').eq(priceSel).removeClass('price_hover');
        $('tr.catTr td').eq(priceSel).removeClass('vertFilt');

        $(this).closest('tr').find('td.category').removeClass('category_hover');

    });

})();
</script>

直播链接： http://www.sinsysonline.com/cameron/nick/repair/price.html

现在，如何在列中突出显示每个等效的孩子......

我知道我需要用.each（）做一些事情，但我不确定该把它放在哪里......

Answer 1

如果我理解你的问题，这就是你要找的东西：

添加类：

$('tr.catTr td:nth-child(' + (priceSel+ 1) + ')').addClass('vertFilt');

To RemoveClass：

$('td.vertFilt').removeClass('vertFilt');

JS

  $('tr.catTr td').not('.category').hover(function () {
       var priceSel = $(this).index();
       $('tr#priceRow td').eq(priceSel).addClass('price_hover');
       $('tr.catTr td:nth-child(' + (priceSel + 1) + ')').addClass('vertFilt');
       $(this).closest('tr').find('td.category').addClass('category_hover');

   }, function () {
       var priceSel = $(this).index();
       $('tr#priceRow td').eq(priceSel).removeClass('price_hover');
       $('td.vertFilt').removeClass('vertFilt');
       $(this).closest('tr').find('td.category').removeClass('category_hover');
   });

Answer 2

要为整列添加类，请使用td:nth-child(n)，其中n是列号。在您的情况下，要突出显示的列不同于2-4。您还需要防止突出显示头部，脚部等元素，因此请使用.not()。

$('table#prices tbody td:nth-child(3)')
  .not('.head,.price,.foot,.category_hover')
  .addClass('vertFilt');

所以，根据您的情况，试试这个：

$('tr.catTr td').not('.category').hover(function(){

    var priceSel = $(this).index();

    $('table#prices tbody td:nth-child('+priceSel+')')
      .not('.head,.price,.foot,.category_hover')
      .addClass('vertFilt');

    ...

},function(){

    var priceSel = $(this).index();

    $('table#prices tbody td:nth-child('+priceSel+')')
      .not('.head,.price,.foot,.category_hover')
      .removeClass('vertFilt');

    ...

jQuery - 在悬停时将样式应用于表格中的所有垂直TD

2 个答案:

JS