javascript - 在 for 循环内分组并根据样式属性修改 span 元素

Question

我在页面上有一组 span 元素。它们使用从后端接收到的一些信息进行定位，并且样式属性会根据之前的 javascipt 执行进行相应更改。

它就像一张 map 。

map 上有几个地点，每个地点都有一个名称。但有些地点可能有多个名称。

<span class="myimages" id="tag-14" style="position: absolute; left: 191px; top: 217px;">hello</span>
<span class="myimages" id="tag-15" style="position: absolute; left: 141px; top: 112px;">bye</span>
<span class="myimages" id="tag-16" style="position: absolute; left: 191px; top: 217px;">welcome</span>
<span class="myimages" id="tag-17" style="position: absolute; left: 50px; top: 12px;">lunch</span>

我想做的是在这个对象数组中创建组，以便我可以根据需要修改它们。

我想做一些事情，比如创建一个数组，然后获取共享相同属性(相同位置)的数组，然后做一些只会影响该组 span 元素而不影响其他元素的事情。

我能够完成的第一部分:

function foam()
    {
    var menus = document.getElementsByClassName("myimages");

         for (var i=0; i < menus.length ; i++)
            {
                menuposition = menus[i].getAttribute("style");
                menus[i].setAttribute('style', menuposition+'background-color:pink;');
            }
    }

但这当然会改变每个元素的样式属性，我希望能够在循环中创建一个循环，或者创建条件或其他东西来实现这一点。

提前致谢。

更新:我无法自动分配类名。位置信息来自一个平面列表，例如:“点名称、图像上的点名称坐标”，并且只有表明一个点相同的信息是 x 和 y 坐标...这在某种程度上是有限的，但情况确实如此.

此外，我还会修改一些属性，而不仅仅是更改背景颜色。

Answer 1

首先，您不应该使用style属性来实际更改元素的样式。您应该使用style 对象属性，所以你这样做:

menus[i].style.backgroundColor = "pink";

这会保留剩余的样式属性，因为它们都列在 style 中。目的。即使您想要设置所有样式属性的列表，也可以使用 menus[i].style.cssText ，这在旧版 IE (<8 IIRC) 中不可用，但这不会成为问题，因为我看到您正在使用 getElementsByClassName .

那么，让我们看看你的问题。如果您认为您可以信赖<span>坐标，你可以像这样过滤掉它们:

var menus = document.getElementsByClassName("myimages");
for (var i=0; i < menus.length ; i++) {
    if (menus[i].style.left === x + "px" && menus[i].style.top === y + "px") {
        menus[i].style.backgroundColor = "pink";
    }
}

这会将背景色“粉红色”分配给所有具有相同 left 的图像和top样式属性(等于 x 和 y 像素)。也许这并不完全是您想要的(请多解释一下)，也许您可​​能想将条件限制为 left仅属性(property)，或 top .

但我最后的建议是为元素设置另一个样式类，以便所有工作都可以变得更容易，甚至完全通过 CSS。需要明确的是:

<span class="myimages group-1" id="tag-14">hello</span>
<span class="myimages group-2" id="tag-15">bye</span>
<span class="myimages group-1" id="tag-16">welcome</span>
<span class="myimages group-3" id="tag-17">lunch</span>

这是相关的CSS:

.myimages {position: absolute;}
.group-1 {
    left: 191px;
    top: 217px;
    background-color: pink;
}
...

除了实际动态分配类之外，别无他法。