0

ナビゲートするマークアップがたくさんあるという非常に単純な問題があります。レビュー用に、すべてが同じ .html に含まれるファイルをアップロードしました。ここに投稿するには長すぎます (マークアップ @ 1500 行) が、行番号のキー ノートを与えることができます。

http://www.sinsysonline.com/repair/price.html

jQuery:

<script>
    (function() { 

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

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

            $('tr.priceRow td').eq(priceSel).addClass('price_hover');
            $('tr.priceRow2 td').eq(priceSel).addClass('price_hover');
            $('tr.catTr td:nth-child(' + (priceSel + 1) + ')').addClass('vertFilt');
            $(this).parent('tr').find('td.category').addClass('category_hover');
            $(this).parent('tr').find('td').not('.category').addClass('rowHov');

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

})();
</script>

問題は、垂直方向の強調表示(デスクトップ/ラップトップ/サーバー)に特化した機能と、下部の 2 番目の強調表示が、ドロップオフページでのみ機能していることです。

現時点での私の理論を述べさせてください...

すべてのテーブルには 'prices' の ID があります: 合計で 4 行、行: 348, 541, 735, 968 . ID ではなくクラスにすると、CSS によって水平方向の配置が崩れます。

一度に 1 つしか表示されない限り、複数の ID を使用しても問題ないという印象を受けました。例: http://www.sinsysonline.com/repair/contact.html

これが、最初のページだけがホバリングされた上下のシステムをハイライト表示している理由ですか、それとも何か他のことが原因ですか?

表示されているテーブルのみをターゲットにするためにここで修正できるものはありますか?

var priceSel = $(this).index();
        $('tr.priceRow td').eq(priceSel).addClass('price_hover');
        $('tr.priceRow2 td').eq(priceSel).addClass('price_hover');

再び：

http://www.sinsysonline.com/repair/price.html

4

1 に答える 1

0 
<script>
    (function() { 

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

            var priceSel = $(this).index();
            console.log(priceSel);
            $(this).closest('table').find('tr.priceRow td').eq(priceSel).addClass('price_hover');
            $(this).closest('table').find('tr.priceRow2 td').eq(priceSel).addClass('price_hover');
            $('tr.catTr td:nth-child(' + (priceSel + 1) + ')').addClass('vertFilt');
            $(this).closest('tr').find('td.category').addClass('category_hover');
            $(this).closest('tr').find('td').not('.category').addClass('rowHov');

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

})();
</script>

問題を解決する

于 2013-06-02T20:15:02.440 に答える