jquery：複数のクラスを持つ要素の1つのクラスに基づいて変数を設定します

Question

私はテーブルを作成していますが、列と行がホバー上でハイライト表示されています（これを行うjqueryプラグインがあります

$('th:not(.features), td:not(.features)').hover(highlight); 

function highlight(){ 
    $('th.highlightCol, td.highlightCol').removeClass('highlightCol'); 
    var col = $(this).attr('class'); 
    $('.' + col).addClass('highlightCol'); 
}; 

$('tr').hover(highlightRowOn, highlightRowOff); 

function highlightRowOn(){ 
    $(this).children('td:not(.highlightCol)').addClass('highlightRow'); 
}; 

function highlightRowOff(){ 
    $(this).children('td:not(.highlightCol)').removeClass('highlightRow'); 
}; 

これは一つの問題から離れて正常に動作します：。私はここで私はこれまで持っているものですので、私は自分自身のためにそれをやってで刺しを持っているだろうと思って）

、学ぶことをしようとしています：
それぞれ 'td'には、その列に固有のクラス（package1、package2、package3、package4）があります。これは、変数 'c​​ol'に渡され、列 'td'の1つが上に置かれたときに列 'highlightCol'を追加します。

しかし、強調表示された行に沿って新しい列にカーソルを移動すると、あなたが着陸する 'td'には2つのクラス（highlightedRowとpackage *）があります。これらは両方とも変数に渡され、その結果、新しい列は正しいクラスを受け取ることができません。

私は 'package *'クラスだけを対象にして 'highlightedRow'クラスを無視して変数に渡す方法はありますか？

誰かが助けてくれて感謝の意を表し、多くの感謝の意を表します。

Answer 1

「highlightedRow」クラスを無視して、変数をちょうど 「パッケージ*」クラスをターゲットと にそれを渡すために私のための方法はありますか？

いいえ、旧式のDOMを使用しています。あなたが学んでいるので、私は解決策を明示的に与えません。

最も簡単な方法は、jQueryからHTMLElementを取得することです。$('.selector').get(0)は、最初に一致した要素を返します。次に、要素のclassNameプロパティを使用して必要なものを取得します。

また、this selectorを使用することもできます。

Answer 2

助けてくれてありがとう。ついにそれを理解しました。興味のある人のためのコードは次のとおりです。

$('th:not(.features), td:not(.features)').hover(highlight, remove); 

function highlight(){ 
    $(this).removeClass('highlightRow'); 
    var col = $(this).attr('class'); 
    $('.' + col).addClass('highlightCol'); 
}; 

function remove(){ 
    $('th.highlightCol, td.highlightCol').removeClass('highlightCol'); 
    $(this).addClass('highlightRow'); 
}; 

$('tr').hover(highlightRowOn, highlightRowOff); 

function highlightRowOn(){ 
    $(this).children('td:not(.highlightCol), th:not(.highlightCol)').addClass('highlightRow'); 
}; 

function highlightRowOff(){ 
    $(this).children('td:not(.highlightCol), th:not(.highlightCol)').removeClass('highlightRow'); 
};