1

できる限り説明します。Javascriptにボタン（右側の赤いボタン）があるので、それぞれをクリックすると緑色に変わり、もう一度クリックすると赤色に変わります。画像ボタン（左側）を機能させようとしています。それぞれをクリックすると、JavaScriptボタン（右側）が回転します。つまり、どちらかを使用して有効化/無効化できます。

これが画像です：

ボタンの画像

HTMLコード：

 <img src="images/menuIcons/skip.gif" width="126" height="34" />
    <div align="center" style="margin-bottom: 10px; margin-left: 10px;">
      <button id="skip" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>

<img src="images/menuIcons/text.gif" width="126" height="34" />
        <div align="center" style="margin-bottom: 10px; margin-left: 10px;">
          <button id="text" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>

<img src="images/menuIcons/message.gif" width="126" height="34" />
    <div align="center" style="margin-bottom: 10px; margin-left: 10px;">
      <button id="message" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>

<img src="images/menuIcons/game.gif" width="126" height="34" />
        <div align="center" style="margin-bottom: 10px; margin-left: 10px;">
          <button id="game" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>

Javascriptコード：

    // enable / disable Buttons
function controls(className,elem) {
    if (className == "red") {
        document.getElementById(elem).setAttribute('class','green');
        // You can define your enable statements here
    } else {
        document.getElementById(elem).setAttribute('class','red');
        // You can define your disables statements here        
    }
}
4

2 に答える 2

1

画像から関数を呼び出すこともできonclickます。ただし、引数としてcontrolsのみを取るように関数を再構築することをお勧めします。id

<img src="images/menuIcons/skip.gif" onclick="controls('skip')" width="126" height="34" />
...
<button id="skip" class="red" onclick="controls(this.id)"></button>
<!-- the other elements analogous -->

// enable / disable Buttons
function controls(elemid) {
    var elem = document.getElementById(elemid);
    if (elem.className == "red") {
        elem.setAttribute('class', 'green');
        // You can define your enable statements here
    } else {
        elem.setAttribute('class', 'red');
        // You can define your disables statements here        
    }
}
于 2012-08-04T22:54:07.070 に答える
0

それはすべて少し複雑です。メニューをコンテナーで囲み、イベント委任を使用してすべての項目のクリック ハンドラーを追加できます。メニューの (プレーンな JavaScript) jsfiddle モックアップを次に示します。

あなたのhtml/コードに関するいくつかのメモ：

  • インライン スタイルや JavaScript を使用しないでください。インライン JavaScript は、実行時に新しいインタープリターを生成します。
  • あなたの html には、同じ を持つ複数の要素がありid、それが問題を引き起こしています。idは一意である必要があります。
  • jQueryを確認する必要があるかもしれません。作業を節約できます。
于 2012-08-05T00:00:18.203 に答える