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 个图像的后退按钮。如果单击其中一个框，就像打开子菜单一样。

所以我以我的方式尝试了它，但效果不佳。如果我单击其中一个框，它将触发通过 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，这也是一个很好的候选者。

希望这会让你朝着正确的方向前进：

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 回答