Same class within the same element-CodePudding

So I'm making a tool to help students learn foreign language. It's basically two columns of text, first in the targeted language, and the other in English. The one I'm currently making is for Greek.

What my goal is that when a word in the first is hovered over it's highlighted and the corresponding word in English in the second column is also highlighted.

The numbers have to be also explicitly named because the Greek and English word order is not the same, and I figured I can do it with classes.

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

But I have really basic knowledge of JQuery so I don't know how to move to selecting the same word in both columns with the same number.

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

I also want to make it work in reverse, that is when I hover over a word in the English column, the corresponding word in the Greek columns gets highlighted as well.

CodePudding user response：

If you want to highlight exact same classes from one column and in the second then you can use this code:

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 >Πολλάκις</span> 
            <span >βραχεῖα</span> 
            <span >ἡδονὴ</span> 
            <span >μακρὰν</span> 
            <span >τίκτει</span> 
            <span >λύπην</span>.
        </td>
        <td class=eng>
            <span >Short</span> 
            <span >pleasure</span> 
            <span >often</span> 
            <span >begets</span> 
            <span >long</span> 
            <span >pain</span>.
        </td>
    </tr>
    <tr>
        <td class=greek>
            <span >Πολλάκις</span> 
            <span >βραχεῖα</span> 
            <span >ἡδονὴ</span> 
            <span >μακρὰν</span> 
            <span >τίκτει</span> 
            <span >λύπην</span>.
        </td>
        <td class=eng>
            <span >Short</span> 
            <span >pleasure</span> 
            <span >often</span> 
            <span >begets</span> 
            <span >long</span> 
            <span >pain</span>.
        </td>
    </tr>
</table>

And you one to highlight when hovering over both languages just add update first main selector to $('.greek > span, .eng > span')

NOTE: I also have one suggestion don't use css() to style the element you single class like 'selected' and use CSS to style that class, this way you avoid inline styles and you can easily change the style without the need to modify the JavaScript code.

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 >Πολλάκις</span> 
            <span >βραχεῖα</span> 
            <span >ἡδονὴ</span> 
            <span >μακρὰν</span> 
            <span >τίκτει</span> 
            <span >λύπην</span>.
        </td>
        <td class=eng>
            <span >Short</span> 
            <span >pleasure</span> 
            <span >often</span> 
            <span >begets</span> 
            <span >long</span> 
            <span >pain</span>.
        </td>
    </tr>
    <tr>
        <td class=greek>
            <span >Πολλάκις</span> 
            <span >βραχεῖα</span> 
            <span >ἡδονὴ</span> 
            <span >μακρὰν</span> 
            <span >τίκτει</span> 
            <span >λύπην</span>.
        </td>
        <td class=eng>
            <span >Short</span> 
            <span >pleasure</span> 
            <span >often</span> 
            <span >begets</span> 
            <span >long</span> 
            <span >pain</span>.
        </td>
    </tr>
</table>