1

我会尽力解释。我有 Javascript 中的按钮（右侧的红色），所以当我单击每个按钮时，它们会变为绿色，当我再次单击它们时，它们会变为红色。我正在尝试让图像按钮（左侧）工作，如果我单击每个按钮，它将打开 javascript 按钮（右侧的红色按钮）。这意味着我可以使用其中任何一个来启用/禁用。

这是图像：

按钮图片

html代码：

 <img src="images/menuIcons/skip.gif" width="126" height="34" />
    <div align="center" style="margin-bottom: 10px; margin-left: 10px;">
      <button id="skip" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>

<img src="images/menuIcons/text.gif" width="126" height="34" />
        <div align="center" style="margin-bottom: 10px; margin-left: 10px;">
          <button id="text" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>

<img src="images/menuIcons/message.gif" width="126" height="34" />
    <div align="center" style="margin-bottom: 10px; margin-left: 10px;">
      <button id="message" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>

<img src="images/menuIcons/game.gif" width="126" height="34" />
        <div align="center" style="margin-bottom: 10px; margin-left: 10px;">
          <button id="game" class="red" onclick="controls(this.getAttribute('class'),this.id)"></button>

Javascript代码：

    // enable / disable Buttons
function controls(className,elem) {
    if (className == "red") {
        document.getElementById(elem).setAttribute('class','green');
        // You can define your enable statements here
    } else {
        document.getElementById(elem).setAttribute('class','red');
        // You can define your disables statements here        
    }
}
4

2 回答 2

1

您也可以从onclick图像上调用该函数。但是，我建议将controls函数重构为仅将 theid作为参数。

<img src="images/menuIcons/skip.gif" onclick="controls('skip')" width="126" height="34" />
...
<button id="skip" class="red" onclick="controls(this.id)"></button>
<!-- the other elements analogous -->

// enable / disable Buttons
function controls(elemid) {
    var elem = document.getElementById(elemid);
    if (elem.className == "red") {
        elem.setAttribute('class', 'green');
        // You can define your enable statements here
    } else {
        elem.setAttribute('class', 'red');
        // You can define your disables statements here        
    }
}
于 2012-08-04T22:54:07.070 回答
0

这一切都有点复杂。你可以用一个容器包围你的菜单，并使用事件委托为所有项目添加一个点击处理程序。这是您菜单的（纯 javascript）jsfiddle 模型。

关于您的 html/代码的一些注释：

  • 不要使用内联样式或 javascript。内联 javascript 在执行时产生一个新的解释器。
  • 在您的 html 中，您有多个相同的元素id，这是自找麻烦。id应该是唯一的。
  • 也许你应该检查jQuery，它可以节省你的工作。
于 2012-08-05T00:00:18.203 回答