时间戳

首页 > 解决方案 > 如何使用变量作为选择器定位多个 div

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

问题描述

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

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

var tooltipSpan = document.getElementById('\"' + popid + '\"');
..........
tooltipSpan.style.top = (y - 320) + "px";
tooltipSpan.style.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";
};

标签： javascripthtml

解决方案

popid 和 tooltipspan 不会在鼠标移动时重新分配，因为它不在 mousemove 函数内。您可以将它们移动到函数内部。

var poper;
var popid;
var tooltipspan;

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

推荐阅读