0

如果您将鼠标悬停在价格上，您会注意到价格和 .catTr td 的第一个子项被突出显示。其他都不是。目标是创建一个非常清晰的网格，以显示所选择的内容。

我怎样才能让它对 tr.cat 列中的每个子 td 应用相同的样式？

直播链接：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() 做一些事情，但我不确定将它放在哪里......

4

2 回答 2

1

如果我正确理解您的问题，这就是您要寻找的：

添加类：

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

删除类：

$('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');
   });
于 2013-06-01T04:10:52.070 回答
0

要为整个列添加一个类，请使用td:nth-child(n)wheren是列号。在您的情况下，您要突出显示的列从 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');

    ...
于 2013-06-01T04:10:54.897 回答