0

5つのボタンがあるとしましょう。クライアントがそれらのいずれかを押すと、JS はthis、アクセスしてボタンの状態を変更する関数にオブジェクトを送信します。this.state変数。私が抱えている問題は、JSでこれらの個々の変数を作成する方法がわからないため、すべてのボタンに他のボタンでは使用されない個々の変数があることです。CSS を使用して、ある種の CSS プロパティを変更することで、これを機能させることができます。たとえば、ページ内の要素に対して何も行わないが、状態を表す 0 から 2 までの数値など、さまざまなプロパティを含めることができる CSS プロパティです。しかし、それはCSSの目的ではないため、これはあまり見栄えがよくありません:) このWebサイトの誰かがこれらの個々の変数を作成する方法を知っているかどうか疑問に思っていましたか? 私はJSを初めて使用し、それについて読む必要があることを知っていますが、現在、この問題に苦労しており、検索エンジンで解決策を見つけることができません. 助けてくれるみんなに感謝します！

4

2 に答える 2

1

ページ上の各ボタンは、オブジェクト タイプ「HTMLButtonElement」のインスタンスです。これが意味することは、他のオブジェクトと同じように扱うことができるということです。

ボタンの代わりにvar me = {};. 非常に簡単に書く
me.state = true;ことができ、オブジェクトにプロパティを作成します。

ここで、2 つのオブジェクトがあるとしますvar btn1 = {}, btn2 = {};。設定しbtn1.state = true;ます。それらは同じオブジェクト タイプ (この場合は一般的な「オブジェクト」タイプ) のインスタンスですが、btn2.state影響を受けていません。

さらに、存在しないプロパティにアクセスすると、特別な値が返されますundefined。この値はfalse、緩やかな比較 (つまり、if( btn2.state)またはのみ
btn2.state == false) で使用される場合は と見なされます。これは、事前に明示的に定義しなくても問題ないことを意味します。これは、false値のように動作するためです。

考慮すべきもう 1 つの点は、2 つの変数に同じオブジェクト タイプの異なるインスタンス (btn1とbtn2上記など) が含まれている場合でも、それらは異なるインスタンスであるため、等しくないということです。次の点を考慮してください。

var btn1 = {}, btn2 = {};
alert(btn1 == btn2); // false
var btn1copy = btn1;
alert(btn1 == btn1copy); // true, both variables point to the same instance

「btn1copy」は、上記のコードでは適切な名前ではありません。インスタンスのコピーではなく、参照のコピーです。これは、明示的にbtn1とbtn1copyが等しくなるように設定したため、一方を変更すると他方が影響を受けることを意味します。観察：

var btn1 = {}, btn2 = {}, btn1copy = btn1;
btn1copy.state = true;
alert(btn1.state); // true
alert(btn2.state); // undefined

これが、JavaScript オブジェクトをもう少し理解するのに役立つことを願っています。さらに混乱させてしまった場合は、申し訳ありません。これ以上理解を深めるお手伝いができるかどうかお知らせください。

于 2013-11-07T13:51:27.977 に答える
0

次のように、要素に任意のプロパティを設定できます。

var currentEl = document.getElementById('myButton');
currentEl.state = 0;
currentEl.favouriteColour = "purple";
currentEl.thing = "hello"

var currentEl = document.getElementBytagName('input')[0];
currentEl.state = 0;
currentEl.favouriteColour = "purple";
currentEl.thing = "hello"

編集：

または、オブジェクトを作成してから、それをプロパティとして要素に追加することもできます。

var settings = {
    'id': 'myId',
    'colour': 'red',
    'thing': 'something
};

それから：

var currentEl = document.getElementBytagName('input')[0];
currentEl.settings = settings;

次に、次のようにアクセスできます。

alert(currentEl.settings.colour);
于 2013-11-07T13:53:46.393 に答える