2 
myDiv = document.getElementById('results');

div = myDiv.getElementsByTagName('div');


for (var i = 0; i < div.length; i++) {
    var division;
    division = div[i];

    // console.log(div[i]);

    division.addEventListener('mouseover', function () {
        division.style.fontWeight = "bold";
        division.style.background = "rgba(0, 7, 255, 0.29)";
    }, false);

    division.addEventListener('mouseout', function () {
        division.style.fontWeight = "";
        division.style.background = "";

    }, false);

HTMLコードは次のとおりです。

<div id="results">
    <div>Resulat 1</div>
    <div>Resulat 2</div>

</div>

いくつかのテキストに太字で背景を置く私のスクリプトは、マウスポインターがその上にあるとき、2番目の要素に対してのみ機能します.. ( <div>Resulat 2</div>)

私はJSの初心者ですが、私がしたことはすべて私にとって正しいので、誰かが理由を教えてもらえますか.

4

3 に答える 3

1

あなたの中に何がdivisionありますfunction()か? divisionでの反復ごとに変更するのと同じですdivision = div[i];。for ループが終了した後divisionはdiv[1]. これが、2 番目の div のみを変更する理由です。

クロージャーを使用してこの問題に取り組むか、関連するオブジェクトへのアクセスを使用できますthis。

division.addEventListener('mouseover', function () {
    this.style.fontWeight = "bold";
    this.style.background = "rgba(0, 7, 255, 0.29)";
}, false);

division.addEventListener('mouseout', function () {
    this.style.fontWeight = "";
    this.style.background = "";
}, false);

ただし、CSS を使用すると、目的の効果を簡単に実現できます。

#results > div:hover{
    font-weight:bold;
    background-color:rgba(0,7,255,0.29);
}
于 2012-11-12T12:54:48.453 に答える
1

使用this:

division.addEventListener('mouseover', function() {
    this.style.fontWeight = "bold";
    this.style.background = "rgba(0, 7, 255, 0.29)";
}, false);

division.addEventListener('mouseout', function() {
    this.style.fontWeight = "";
    this.style.background = "";    
}, false);​

divisionループのために最後の div を保持します。
ライブデモ

必要な場合の別の方法は、反復ごとにプライベートスコープクロージャーを作成することです。

for (var i = 0; i < div.length; i++) {
    (function() {
        var division = div[i];;

        division.addEventListener('mouseover', function() {
            division.style.fontWeight = "bold";
            division.style.background = "rgba(0, 7, 255, 0.29)";
        }, false);

        division.addEventListener('mouseout', function() {
            division.style.fontWeight = "";
            division.style.background = "";

        }, false);
    })();
}​

ライブデモ

于 2012-11-12T12:54:57.670 に答える
0

イベントリスナーで「分割」が設定されている最後の要素を参照しています。好きなようにするには、その場所で「これ」を使用します。

myDiv = document.getElementById('results');

div = myDiv.getElementsByTagName('div');

for (var i = 0; i < div.length; i++) {
    var division = div[i];

    division.addEventListener('mouseover', function (e) {
        this.style.fontWeight = "bold";
        this.style.background = "rgba(0, 7, 255, 0.29)";
    }, false);

    division.addEventListener('mouseout', function (e) {
        this.style.fontWeight = "normal";
        this.style.background = "inherit";
    }, false);
}
于 2012-11-12T13:07:16.993 に答える