0

ページに一連のスパン要素があります。それらは、バックエンドから受信したいくつかの情報で配置され、style 属性は以前の javascipt の実行に応じて変更されます。

地図のようなものです。

地図上にはいくつかのスポットがあり、すべてのスポットには名前があります。ただし、いくつかのスポットには複数の名前がある場合があります。

<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>

私がやりたいことは、このオブジェクトの配列内にグループを作成して、必要に応じて変更できるようにすることです。

配列を作成してから、同じ属性 (同じ位置) を共有するものを取得し、そのスパン要素のグループにのみ影響し、他の要素には影響しないようなことをしたいと考えています。

私が満たすことができる最初の部分：

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;');
            }
    }

しかし、これはもちろん、すべての要素のスタイル属性を変更します。ループ内でループを作成したり、これを満たすための条件や何かを作成したりしたいと考えています。

前もって感謝します。

更新: クラス名を自動的に割り当てることはできません。位置情報は、「スポット名、画像上のスポット名の座標」のようなフラットなリストから来ており、1 つのスポットが同じであることを示す情報のみが x & y 座標です...どういうわけか制限されていますが、そうです.

また、背景色を変更するだけでなく、いくつかの属性を変更します。

4

1 に答える 1

2

styleまず、要素のスタイルを実際に変更するために属性を使用しないでください。style object プロパティを使用する必要があるため、次のようにします。

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に等しい) を持つすべての画像に割り当てられます。たぶんそれはあなたが望んでいるものではないかもしれません（もう少し説明してください）、そして条件をプロパティのみに制限したいかもしれません.xylefttop

しかし、最終的には、要素に別のスタイル クラスを設定して、すべての作業を簡単にするか、完全に 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;
}
...

そして、実際にクラスを動的に割り当てる以外に何もすることはありません。

于 2012-06-23T08:35:26.473 に答える