Question

我需要一些帮助。

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

这就是我的意思：

Example of parallel French-English text with highlight

在示例中，如果我将鼠标悬停在法语中的'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>

感谢您的帮助， AB

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>

同时突出显示悬停时的两个相关单词（HTML，JS，PHP）

1 个答案: