同一個元素中的同一個類

所以我正在制作一個工具來幫助學生學習外語。它基本上是兩列文本，第一列是目標語言，另一列是英語。我目前正在制作的是希臘語。

我的目標是，當第一個單詞懸停在它上面時，它會突出顯示，并且第二列中相應的英文單詞也會突出顯示。

這些數字也必須明確命名，因為希臘語和英語的詞序不一樣，我想我可以用類來做到這一點。

<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)'});
        }
    );

我還想讓它反向作業，即當我將滑鼠懸停在英語列中的一個單詞上時，希臘列中的相應單詞也會被突出顯示。

uj5u.com熱心網友回復：

如果您想從一列中突出顯示完全相同的類，而在第二列中則可以使用以下代碼：

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>

標籤：html jQuery css

上一篇：自動完成不適用于動態創建的輸入元素

下一篇：如何將可重用的JavaScript代碼移動到單獨的檔案中，而不是主檔案并多次使用？