如何使用变量作为选择器定位多个 div

Question

当将鼠标悬停在包含多张图片的输入字段中的另一张图片上时，我试图获得更大的图片。

我尝试了波纹管代码。 但是当我使用变量来获取鼠标位置时，大图的定位不起作用。 我的问题是这部分代码：

var tooltipSpan = document.getElementById('\"' + popid + '\"'(;
..........
tooltipSpan.style.top = (y - 320( + "px";
工具提示跨度样式.left = (x - 310( + "px";

当我提醒这个变量"('\"' + popid + '\"'("时，一切看起来都很好， 当我输入与手动提醒相同的最后一个功能时，一切正常。 我错了什么？请有人给我提示或改进代码。

这是 HTML，我无法更改它，它是生成的。

<div id= "yyy" class = ..........
<input class =.......
<label for="something" class='ClassExample1'>
something
</label>
<label for="something" class='ClassExample2'>
something
</label>

这是我添加的，div的id是输入的类名， 我获取输入字段的类名并从中创建一个变量 并尝试设置它们以定位更大的图片。

<div id='ClassExample1' class='Class a'>
<p><img src="some source"/></p>
</div>
<div id='ClassExample2' class='Class a'>
<p><img src="some source"/></p>
</div>
.
.
.
.
.

这是我制作的代码：

document.getElementById( 'id yyy' ).getElementsByClassName( 'ClassExample1' )[0].onmouseover = function() {mouseOn1()};
document.getElementById( 'id yyy' ).getElementsByClassName( 'ClassExample1' )[0].onmouseout = function() {mouseOut1()};
function mouseOn1() {document.getElementById('ClassExample1').style.display = 'block';};
function mouseOut1() {document.getElementById('ClassExample1').style.display = 'none';};
document.getElementById( 'id yyy' ).getElementsByClassName( 'ClassExample2' )[0].onmouseover = function() {mouseOn2()};
document.getElementById( 'id yyy' ).getElementsByClassName( 'ClassExample2' )[0].onmouseout = function() {mouseOut2()};
function mouseOn2() {document.getElementById('ClassExample2').style.display = 'block';};
function mouseOut2() {document.getElementById('ClassExample2').style.display = 'none';};
.
.
.
.
.
/*Position of mouse hover picture*/
var poper;
window.onmouseover=function(e) {
poper = (e.target.className);
};
var popid = "'" + poper + "'";
var tooltipSpan = document.getElementById(popid);
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y - 320) + "px";
tooltipSpan.style.left = (x - 310) + "px";
};

Answer 1

popid 和工具提示跨度不会在鼠标移动时重新分配，因为它不在鼠标移动函数内。您可以在函数内移动它们。

var poper;
var popid;
var tooltipspan;
window.onmouseover = function(e) {
poper = (e.target.className);
popid = "'" + poper + "'";
tooltipSpan = document.getElementById(popid);
};