1

私の現在のプロジェクトでは、HTML 要素のプロパティを変更しようとしているときに、(私の観点からは) やや奇妙な動作に遭遇しました。

私のコードでは、javascript オブジェクトを定義しています。このオブジェクトには、コンストラクターを介して渡される html 要素を含む「this.element」プロパティがあります。このオブジェクト内には、いくつかの関数があります。これらの関数の 1 つで、次のようにして、そのオブジェクトのスタイリングを変更しようとしています。

this.element.style.visibility = "hidden";

これを実行しようとしてもエラーは発生しませんが、スタイルは変更されません。しばらくして、回避策を発見しました。

document.getElementById(this.element.id).style.visibility = "hidden";

これは基本的に同じです。これは機能し、要素のスタイルを設定できます。この回避策は機能しますが、要素に ID が必要です。これは問題ではありませんが、これを回避できれば、私のコーディングはずっと簡単になります。

私はこれを Chrome でテストしています。Chrome は、プロジェクトの展開の準備ができたら使用するのと同じブラウザーです。そのため、別のブラウザーを使用することは実際には選択肢ではありません。

誰かが私がこの状況を理解/解決するのを手伝ってくれるなら、私は大いに感謝します:) - 事前に感謝します

編集: いくつかのコード。私がまとめたこの例は、私が何をしているかを示しています。ただし、これを単独で実行すると、説明した動作を実現できません。

これが重要かどうかはわかりませんが、私の場合、「changeAllStyles」を表す関数は、コンストラクターの直後に呼び出されると正常に機能します。この関数のすべてのサブシーケンス呼び出しは、websocket からの「onMessage」イベントの呼び出しによるものです。

var myObjArray = [];

function init(){
    //Using jQuery to select all elements containing the "data-whatever" attribute:
    var elements = $('*[data-whatever]');

    //Create a myObj object for each of theese elements:
    for (var i = 0; i < elements.length; i++) {
        var params = elements[i].getAttribute("data-whatever");
        myObjArray.push(new myObj(elements[i], params));
        myObjArray[i].changeStyle();
    }
}

function myObj(element, params){
    this.element = element;
    this.params = params;

    this.changeStyle = function(){
        this.element.style.visibility = "hidden";
    };
}

function changeAllStyles(){
    for (var i = 0; i < myObjArray.length; i++) {
        myObjArray[i].changeStyle();
    }
}
4

2 に答える 2

0

this.element次のように、コードの他の場所で、初期化してから再作成した後に DOM 要素を削除しているように聞こえます。

HTML:

<div id='bar'><span id='foo'>This is foo</span> inside 'bar'</div>

JavaScript:

var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
bar.innerHTML = "<span id='foo'>This is a new foo</span> inside 'bar'";
foo.style.visibility = "hidden"; // <== No effect, wrong element

ご覧のとおり、「foo」要素を取得し、「bar」要素を取得してから、「bar」の内容を新しいものに置き換えています。つまり、「バー」内のすべての要素が削除され、新しい要素が作成されます。新しい要素の 1 つに ID "foo" が含まれている場合があります。

document.getElementById(foo.id).style.visibility = "hidden";

...同じIDを持っているのはまったく異なる要素foo.style.visibility = "hidden";であるため、機能しなくても機能します。

于 2011-02-04T13:48:35.630 に答える