0

私は少し潜んでいて、答えを見つけることができませんでした。基本的に、ドロップダウンメニューに変えてコードを実行したいボタンがたくさんありますonChange。しかし、私はJavaScriptが初めてで、これがどのように機能するかを理解するのに苦労しています. ある程度は機能しましたが、複数のオプションで機能させることはできませんでした。ここに私が持っているものがあります:

<button class="lightbutton" onclick="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);">
All lights on</button> 
<button class="lightbutton" onclick="lightswitch(1,false);lightswitch(2,false);lightswitch(3,false);">
All lights off</button>

私はこれを行うことでライトをオンにしました：

<form name="functions">
<select name="jumpmenu" onChange="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);">
<option>LightFunctions</option>
<option value="*";>Light 1 On</option>
<option value="*";>Light 1 Off</option>
</select>
</form>

これで、これが機能する理由がわかりました。変化するたびにすべてのライトをオンにするように指示しているだけです。しかし、「onChange」を変更して、選択したオプションを取得するにはどうすればよいですか?

私はいくつかのJSが欠けていると思いますが、不明です。

助けてくれてありがとう。

4

1 に答える 1

2

その select 要素が最初のライトスイッチだけを制御するようにするには、次のようにします。

<select name="jumpmenu" onChange="lightswitch(1,this.value==='on');">
<option value="on";>Light 1 On</option>
<option value="off";>Light 1 Off</option>
</select>

つまり、選択要素の現在の値trueをテストするために 2 番目のパラメーターとしてハードコーディングする代わりに。lightswitch()( value 属性をより意味のあるものに変更したことに注意してください。式は または のいずれかthis.value==='on'に評価されます。)truefalse

select のonChange属性内ではthis、select 要素自体を参照します。

編集: 同じ選択で複数のパラメーターを制御するdata-には、オプション要素にいくつかの属性を追加して、オプションごとに必要な数の追加パラメーターを保存できます (この場合、余分なパラメーターは 1 つだけ必要だと思います)。そして、インライン属性からロジックを移動します。

<select name="jumpmenu" onChange="jumpChange(this);">
  <option value="">LightFunctions</option>
  <option data-switchNo="1" value="on";>Light 1 On</option>
  <option data-switchNo="1" value="off";>Light 1 Off</option>
  <option data-switchNo="2" value="on";>Light 2 On</option>
  <option data-switchNo="2" value="off";>Light 2 Off</option>
  <option data-switchNo="3" value="on";>Light 3 On</option>
  <option data-switchNo="3" value="off";>Light 3 Off</option>
</select>

function jumpChange(sel) {
   if (sel.value === "") return; // do nothing if user selected first option

   var whichLight = +sel.options[sel.selectedIndex].getAttribute("data-switchNo");
   lightswitch(whichLight, sel.value==='on');

   sel.value = ""; // reset select to display the "Light Functions" option
}

デモ: http://jsfiddle.net/N7b8j/2/

jumpChange(sel)パラメータを追加した関数内ではsel、select 要素になります (属性thisから設定されonChangeます)。「魔法」は次の行で発生します。

var whichLight = +sel.options[sel.selectedIndex].getAttribute("data-switchNo");

その行を説明するには:sel.options[sel.selectedIndex]現在選択されているオプションへの参照を.getAttribute("data-switchNo")取得し、そのオプションのdata-属性を取得します。は+、属性を文字列から数値に変換します。

于 2013-02-09T22:42:55.687 に答える