JavaScript的ID變化的onclick功能

Question

所以我有一個3×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個圖像。就像一個子菜單被打開，如果其中一個框被點擊。

所以我嘗試了我的方式，但它不工作得很好。如果我點擊其中一個框，它會觸發通過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"); 

     } 

我第一次嘗試與標籤，因爲我認爲這將以相同的方式處理圖像。

Answer 1

由於不確定長期應用，我可能會有一個起點。如果您想要擴展，提供的初始腳本可能會有點不便，所以現在有一個「defineElements」方法可用於配置元素。請注意，參數參數也已添加到html中的onclick事件中。

「defineElements」函數返回一個關聯數組對象（例如鍵/值對），每個鍵都以html元素id命名。每個鍵的值也是一個包含元素id（eid），label（lbl）和event（evnt）的關聯數組。

短篇小說長...當你點擊一個按鈕，每個按鈕的標籤被改變，並分配適當的點擊處理程序。如果您單擊標有「返回」的按鈕，則默認的點擊處理程序會重新分配給所有人。

如果可以的話，這也是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(); 
}