Question

所以，我是一个新手，我有一个逻辑错误，我无法弄清楚。我正在尝试编写一个页面来显示宾果游戏中的数字。我有一个16行和5列的表，以容纳标题和每个可能的宾果号码。我希望用户能够单击按钮并切换显示所调用号码的img。这是一个片段：

<tr>
   <td><button onclick="toggle('picture')">B-1</button>
      <div id="picture" style="display:none"><img src="B1.png"/></div></td>
   <td><button onclick="toggle('picture')">I-16</button>
      <div id="picture" style="display:none"><img src="I16.png"/></div></td>
   <td><button onclick="toggle('picture')">N-31</button>
      <div id="picture" style="display:none"><img src="N31.png"/></div></td>  
</tr>

要切换，我有以下js代码：

function toggle(id) {
   var element = document.getElementById(id);  
    if(element.style.display == "none")
       show(id);
    else
       hide(id);}

function show(id){
    document.getElementById(id).style.display = "block";}

function hide(id){
    document.getElementById(id).style.display = "none";}

所以，无论我点击哪个按钮，B1切换，但不是其他。我明白问题是（我认为）我传递给函数的内容。我通过什么，以便该功能仅对我用来调用它的按钮进行操作？

如果有人可以帮助我获得正确的代码以便它能够正常工作，那就太棒了，但是如果你能帮助我解决一些问题以便我理解它，那就更好了！提前谢谢！

Answer 1

ID必须是唯一的尝试，如下所示：

<td><button onclick="toggle('B1.png')">B-1</button>
      <div id="B1.png" style="display:none"><img src="B1.png"/></div></td>
   <td><button onclick="toggle('I16.png')">I-16</button>
      <div id="I16.png" style="display:none"><img src="I16.png"/></div></td>
   <td><button onclick="toggle('N31.png')">N-31</button>
      <div id="N31.png" style="display:none"><img src="N31.png"/></div></td>  

function toggle(id) {
   var element = document.getElementById(id);  
    if(element.style.display == "none"){
       element.style.display = "block";
    }else{
       element.style.display = "none";
    }
}

Answer 2

试试这个：

http://jsfiddle.net/SPyVB/

<table>
  <tr>
     <td><button onclick="toggle('picture1')">B-1</button>
     <div id="picture1" style="display:none"><img src="B1.png"/></div></td>
     <td><button onclick="toggle('picture2')">I-16</button>
     <div id="picture2" style="display:none"><img src="I16.png"/></div></td>
     <td><button onclick="toggle('picture3')">N-31</button>
     <div id="picture3" style="display:none"><img src="N31.png"/></div></td>  
  </tr> 
</table>

的javascript：

function toggle(id) {
  var element = document.getElementById(id);  
  if(element.style.display == "none")
   element.style.display = "block";
  else
   element.style.display = "none";
}

Answer 3

2件事。 ID必须是唯一的，并且您设置它的方式需要将它们传递给您的函数。

<tr>
   <td><button onclick="toggle('picture1')">B-1</button>
      <div id="picture1" style="display:none"><img src="B1.png"/></div></td>
   <td><button onclick="toggle('picture2')">I-16</button>
      <div id="picture2" style="display:none"><img src="I16.png"/></div></td>
   <td><button onclick="toggle('picture3')">N-31</button>
      <div id="picture3" style="display:none"><img src="N31.png"/></div></td>  
</tr>

在Javascript中切换img

3 个答案: