0

したがって、次のような3 x 3テーブルを取得しました。

<table align=left width="896px" class="tableCategories">
<tr class="trCategories">
    <td class="tdCategories"><input type="button" id="P11" onclick="clickE()" value="E" /></td>
    <td class="tdCategories"><input type="button" id="P12" onclick="clickS()" value="S" /></td>
    <td class="tdCategories"><input type="button" id="P13" onclick="clickB()" value="B" /></td>
....

ユーザーが9つのボックスの1つをクリックすると、すべてのボックスが背景画像を変更し、クリックされたボックス自体が最初の9つの画像を参照する戻るボタンに変わります。ボックスの 1 つがクリックされるとサブメニューが開くように。

だから私は自分のやり方でそれを試しましたが、うまくいきません。ボックスの 1 つをクリックすると、ID を介して接続された両方のアクションがトリガーされます。だから私の考えは id をに変更することでしたが、それを行うためのよりスマートな方法があるのではないかと思いました。だから私はここに私の問題を書きました:D

編集：

すべての関数の JavaScript 部分は次のようになります。

function clickE()
        {
            document.getElementById("P11").value = "Zurück";
            document.getElementById("P11").onclick = clickBack;

            document.getElementById("P12").value = "Restaurant";
            document.getElementById("P12").onclick =clickCategory("restaurant");

            document.getElementById("P13").value = "Imbiss";
            document.getElementById("P13").onclick =clickCategory("imbiss");

            document.getElementById("P21").value = "Bäckerei";
            document.getElementById("P21").onclick =clickCategory("baeckerei");

            document.getElementById("P22").value = "Fast Food";
            document.getElementById("P22").onclick =clickCategory("fast_food");

            document.getElementById("P23").value = "Süßes";
            document.getElementById("P23").onclick =clickCategory("suesses");

            document.getElementById("P31").value = "Cafe";
            document.getElementById("P31").onclick =clickCategory("cafe");

            document.getElementById("P32").value = "Bar";
            document.getElementById("P32").onclick =clickCategory("bar");

            document.getElementById("P33").value = "Kneipe";
            document.getElementById("P33").onclick =clickCategory("kneipe");

        }

画像でも同じように機能すると思うので、最初にラベルで試します。

4

1 に答える 1

1

長期的なアプリケーションについて確信が持てないので、出発点になるかもしれません。提供された最初のスクリプトは、拡張したい場合に少し扱いに​​くくなる可能性があるため、要素を構成するために使用できる「defineElements」メソッドが用意されています。html の onclick イベントにも引数パラメータが追加されていることに注意してください。

「defineElements」関数は、各キーが html 要素 ID に基づいて命名された連想配列オブジェクト (キーと値のペアなど) を返します。各キーの値も、要素 ID (eid)、ラベル (lbl)、およびイベント (evnt) を含む連想配列です。

簡単な話ですが、ボタンをクリックすると、各ボタンのラベルが変更され、適切なクリック ハンドラーが割り当てられます。「戻る」というラベルの付いたボタンをクリックすると、デフォルトのクリック ハンドラがすべてに再割り当てされます。

jQuery が利用できる場合、これは jQuery の優れた候補でもあります。

うまくいけば、これにより正しい方向に進むことができます。

HTML

<table>
<tr class="trCategories">
    <tr class="trCategories">
    <td class="tdCategories"><input type="button" id="P11" onclick="clickE(this.id)" value="E" /></td>
    <td class="tdCategories"><input type="button" id="P12" onclick="clickS(this.id)" value="S" /></td>
    <td class="tdCategories"><input type="button" id="P13" onclick="clickB(this.id)" value="B" /></td>
</tr>
</table>

==そしてJavascript

function clickE(id){
  var elementDef = defineElements(id);

  for(var key in elementDef){
    var propObj = elementDef[key];
    //console.log(propObj);
    document.getElementById(propObj.eid).value = propObj.lbl;
    if(id == undefined)
    document.getElementById(propObj.eid).onclick = function(){ clickE(this.id);}     //--reassign default event
    else
    document.getElementById(propObj.eid).onclick = propObj.evnt;
  }
}


function defineElements(id){
   var elementArr = ['P11','P12','P13']; //--add your element id's to this array to extend, and then add a case for each within switch below
   var definitionObj = {};

   for(var i = 0; i < elementArr.length; i++){
     switch(elementArr[i].toUpperCase()){
       case 'P11':
          definitionObj[elementArr[i].toUpperCase()] = { eid:elementArr[i].toUpperCase(), lbl:'Zuruck', evnt: function(){ clickCategory.call(this, "whatever"); } };
       break;
       case 'P12':
          definitionObj[elementArr[i].toUpperCase()] = { eid:elementArr[i].toUpperCase(), lbl:'Restaurant', evnt: function(){ clickCategory.call(this,"restaurant"); } };
       break;
       case 'P13':
          definitionObj[elementArr[i].toUpperCase()] = { eid:elementArr[i].toUpperCase(), lbl:'Imbiss', evnt: function(){ clickCategory.call(this,"imbiss"); } };
       break;
     }
   }

   if(id != undefined){  
    definitionObj[id]['evnt'] = function(){ clickBack.call(this); } //--assign the clickback function to the selected element based on id paramater
    definitionObj[id]['lbl'] = 'Back';
   }

   return definitionObj;
}

function clickCategory(cat){
  alert(cat);
}

function  clickBack(){
  clickE();
}
于 2013-03-23T06:02:43.527 に答える