所以我正在制作一个帮助学生学习外语的工具.它基本上是两列文本,第一列是目标语言,另一列是英语.我现在做的是希腊语.

我的目标是,当第一列中的一个单词悬停在上方时,它会高亮显示,第二列中对应的英语单词也会高亮显示.

数字也必须显式命名,因为希腊语和英语的词序不一样,我想我可以用类来命名.

<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有着非常基本的了解,所以我不知道如何在两列中用相同的数字 Select 相同的单词.

$(".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)'});
        }
    );

我还想让它以相反的方式工作,即当我将鼠标悬停在英语列中的一个单词上时,希腊列中相应的单词也会高亮显示.

推荐答案

如果要在一列和第二列中高亮显示完全相同的类,则可以使用以下代码:

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>

当你在这两种语言上悬停时,只需将更新第一个主 Select 器添加到$('.greek > span, .eng > span')即可

NOTE:我还有一个建议,不要使用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>

Html相关问答推荐

有没有什么方法可以很容易地给一个SVG一个插框阴影?

在css中是否可以在遮罩图像中结合线性渐变和径向渐变?

当浏览器宽度减小时字体大小变得太大

当多个a元素用作目标时的:target伪类

在HTML请求中添加源URL

如何垂直对齐列表中的图像和文本?

如何调整底部有 SVG 的元素的高度,使其在所有宽度上看起来都不错?

在 CSS 中的 div 中获取文本以环绕其他文本?

使用 calc 函数设置字体大小时 Flexbox 项目重叠

我用 ejs 修复了一个奇怪的语法错误,我想知道问题出在哪里

在不扭曲图像的情况下将图像放入灵活的 Div 框内

使用 tailwind css 将 HTML/CSS/JS 站点转换为 React App

动态使用时波浪号不转换为绝对路径

如何使用 :hover zoom 重叠图像?

SVG 适用于 Safari,不适用于 Chrome

图标未定位到右上角

隐藏弹出元素上的滚动条

将鼠标悬停在其他单词上时更改文本 colored颜色

如何使用 Rvest 抓取带有嵌套列的 HTML 表?

向卡片添加过渡