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(); 
}