Question

所以我得到了一张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个图像的后退按钮。就像一个子菜单被打开，如果其中一个框被点击。

所以我按照自己的方式尝试了它，但效果并不好。如果我点击其中一个框，它会触发通过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();
}

javascript id更改onclick功能

1 个答案: