悬停时同时突出显示两个相关单词(HTML，JS，PHP)

Question

我需要一点帮助。

我希望当我将鼠标悬停在页面上或单击其中一个时，能够同时突出显示页面上的两个(或多个(不同但相关的单词。

这就是我的意思：

带突出显示的并行法语-英语文本示例

在示例中，如果我将鼠标悬停在法语中的"croyez"上，则会突出显示英语单词"believe"，反之亦然。我想为文本中的每个单词创建对应关系。

我

遇到了这段代码，我对其进行了一点编辑。它可以完成这项工作，但显然不优雅，并且为大文件创建链接太费力了。

JAVASCRIPT:
var spana = document.getElementsByClassName('classA');
var i = 0;
while(i < spana.length){
    spana[i].onmouseover = function change(){
        var i = 0;
        while(i < spana.length){
            spana[i].style.color = 'red';
            i++;
        }
    }
    spana[i].onmouseout = function change(){
        var i = 0;
        while(i < spana.length){
            spana[i].style.color = 'black';
            i++;
        }
    }
    i++;
}
var spanb = document.getElementsByClassName('classB');
var i = 0;
while(i < spanb.length){
    spanb[i].onmouseover = function change(){
        var i = 0;
        while(i < spanb.length){
            spanb[i].style.color = 'red';
            i++;
        }
    }
    spanb[i].onmouseout = function change(){
        var i = 0;
        while(i < spanb.length){
            spanb[i].style.color = 'black';
            i++;
        }
    }
    i++;
}
var spanc = document.getElementsByClassName('classC');
var i = 0;
while(i < spanc.length){
    spanc[i].onmouseover = function change(){
        var i = 0;
        while(i < spanc.length){
            spanc[i].style.color = 'red';
            i++;
        }
    }
    spanc[i].onmouseout = function change(){
        var i = 0;
        while(i < spanc.length){
            spanc[i].style.color = 'black';
            i++;
        }
    }
    i++;
}
CSS:
.classA:hover {
  color: blue;
}
.classB:hover {
  color: blue;
}
.classB:hover {
  color: blue;
}
HTML:
<div class="wrapper_class">
<span class="classA">Le</span>
<span class="classB">chat</span>
<span class="classC">noir</span>
<span class="classA">The</span>
<span class="classC">black</span>
<span class="classB">cat</span>
</div>

感谢您的帮助，血型

Answer 1

我对你的代码做了三个更改：1.你对两个嵌套循环使用相同的变量i。因此，我将第二个变量命名为 j 。2：我切换了 HTML 和 JavaScript 代码的位置，因为 JavaScript 代码指的是在 JavaScript 代码之后编写的 HTML 标签。3：我已经按照你的要求减少了JavaScript代码。

<div class="wrapper_class">
<span class="classA">Le</span>
<span class="classB">chat</span>
<span class="classC">noir</span>
<span class="classA">The</span>
<span class="classC">black</span>
<span class="classB">cat</span>
</div>
<script type="text/javascript">
<?php
$chars = ['A','B','C'];
for($i=0;$i<count($chars);$i++){
?>
var span<?php echo $chars[$i]; ?> = document.getElementsByClassName('class<?php echo $chars[$i]; ?>');
var i = 0;
while(i < span<?php echo $chars[$i]; ?>.length){
    span<?php echo $chars[$i]; ?>[i].onmouseover = function change(){
        var j = 0;
        while(j < span<?php echo $chars[$i]; ?>.length){
            span<?php echo $chars[$i]; ?>[j].style.color = 'red';
            j++;
        }
    }
    span<?php echo $chars[$i]; ?>[i].onmouseout = function change(){
        var j = 0;
        while(j < span<?php echo $chars[$i]; ?>.length){
            span<?php echo $chars[$i]; ?>[j].style.color = 'black';
            j++;
        }
    }
    i++;
}
<?php } ?>
</script>
<style type="text/css">
.classA:hover {
  color: blue;
}
.classB:hover {
  color: blue;
}
.classB:hover {
  color: blue;
}
</style>