html - 同一元素内的同一类

Question

所以我正在制作一个工具来帮助学生学习外语。它基本上是两栏文本，第一栏是目标语言，另一栏是英语。我目前正在制作的是希腊语。

我的目标是，当第一列中的某个词悬停在其上方时，它会突出显示，第二列中相应的英文单词也会突出显示。

数字也必须明确命名，因为希腊语和英语的词序不一样，我想我可以用类来做到这一点。

<table>
    <tr>
        <td class=greek>
            <span class="adv one">Πολλάκις</span> 
            <span class="adj one">βραχεῖα</span> 
            <span class="noun one">ἡδονὴ</span> 
            <span class="adj two">μακρὰν</span> 
            <span class="verb one">τίκτει</span> 
            <span class="noun two">λύπην</span>.
        </td>
        <td class=eng>
            <span class="adj one">Short</span> 
            <span class="noun one">pleasure</span> 
            <span class="adv one">often</span> 
            <span class="verb one">begets</span> 
            <span class="adj two">long</span> 
            <span class="noun two">pain</span>.
        </td>
    </tr>
</table>

但我对 JQuery 有真正的基础知识，所以我不知道如何在两列中选择相同数字的相同单词。

$(".greek > .noun").hover(
        function() {
            $(".greek > .noun, .eng > .noun").css({'color': 'white', 'background-color': 'rgb(79,129,189)'});
        }, function() {
            $(".greek > .noun, .eng > .noun").css({'color': 'black', 'background-color': 'rgb(255,255,255)'});
        }
    );

我还想让它反向工作，也就是说，当我将鼠标悬停在英语栏中的某个单词上时，希腊语栏中的相应单词也会突出显示。

Answer 1

如果你想在一列和第二列中突出显示完全相同的类，那么你可以使用以下代码:

function clear() {
  $('.greek > span, .eng > span').css({ color: '' });
}

$('.greek > span').hover(function() {
   var self = $(this);
   var cls = self.attr('class');
   clear();
   // create CSS selector out of class property
   // so "adv one" become ".adv.one"
   var selector = cls.split(/\s+/).map(cls => '.' + cls).join('');
   self.closest('tr').find(selector).css({ color: 'red' });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td class=greek>
            <span class="adv one">Πολλάκις</span> 
            <span class="adj one">βραχεῖα</span> 
            <span class="noun one">ἡδονὴ</span> 
            <span class="adj two">μακρὰν</span> 
            <span class="verb one">τίκτει</span> 
            <span class="noun two">λύπην</span>.
        </td>
        <td class=eng>
            <span class="adj one">Short</span> 
            <span class="noun one">pleasure</span> 
            <span class="adv one">often</span> 
            <span class="verb one">begets</span> 
            <span class="adj two">long</span> 
            <span class="noun two">pain</span>.
        </td>
    </tr>
    <tr>
        <td class=greek>
            <span class="adv one">Πολλάκις</span> 
            <span class="adj one">βραχεῖα</span> 
            <span class="noun one">ἡδονὴ</span> 
            <span class="adj two">μακρὰν</span> 
            <span class="verb one">τίκτει</span> 
            <span class="noun two">λύπην</span>.
        </td>
        <td class=eng>
            <span class="adj one">Short</span> 
            <span class="noun one">pleasure</span> 
            <span class="adv one">often</span> 
            <span class="verb one">begets</span> 
            <span class="adj two">long</span> 
            <span class="noun two">pain</span>.
        </td>
    </tr>
</table>

当悬停在两种语言上时，您要突出显示只需将更新第一个主选择器添加到 $('.greek > span, .eng > span')

注意:我还有一个建议，不要使用 css() 来设置元素的样式，例如 'selected' 和使用 CSS 为该类设置样式，这样可以避免内联样式，并且无需修改 JavaScript 代码即可轻松更改样式。

function clear() {
  $('.greek > span, .eng > span').removeClass('selected');
}

$('.greek > span').hover(function() {
   var self = $(this);
   var cls = self.attr('class');
   clear();
   // create CSS selector out of class property
   // so "adv one" become ".adv.one"
   var selector = cls.split(/\s+/).map(cls => '.' + cls).join('');
   self.closest('tr').find(selector).addClass('selected');
});

.selected {
  color: red;
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td class=greek>
            <span class="adv one">Πολλάκις</span> 
            <span class="adj one">βραχεῖα</span> 
            <span class="noun one">ἡδονὴ</span> 
            <span class="adj two">μακρὰν</span> 
            <span class="verb one">τίκτει</span> 
            <span class="noun two">λύπην</span>.
        </td>
        <td class=eng>
            <span class="adj one">Short</span> 
            <span class="noun one">pleasure</span> 
            <span class="adv one">often</span> 
            <span class="verb one">begets</span> 
            <span class="adj two">long</span> 
            <span class="noun two">pain</span>.
        </td>
    </tr>
    <tr>
        <td class=greek>
            <span class="adv one">Πολλάκις</span> 
            <span class="adj one">βραχεῖα</span> 
            <span class="noun one">ἡδονὴ</span> 
            <span class="adj two">μακρὰν</span> 
            <span class="verb one">τίκτει</span> 
            <span class="noun two">λύπην</span>.
        </td>
        <td class=eng>
            <span class="adj one">Short</span> 
            <span class="noun one">pleasure</span> 
            <span class="adv one">often</span> 
            <span class="verb one">begets</span> 
            <span class="adj two">long</span> 
            <span class="noun two">pain</span>.
        </td>
    </tr>
</table>