Question

我有一些代码用于显示或隐藏文字的按钮。 Java脚本和html如下所示。但是，我想添加多个按钮来执行相同的功能，但正如您在下面看到的那样＆＃39; bt1＆＃39;被硬编码到脚本中。如何从其他按钮向脚本传递不同的ID？我是一个Java脚本新手...

感谢!!!

JAVASCRIPT

<script language="JavaScript">
function setVisibility(id) {

if(document.getElementById('bt1').value=='Hide Layer     \u2228')

    {
    document.getElementById('bt1').value = 'Show Layer     \x3E';
    document.getElementById(id).style.display = 'none';
    }
    else
    {
    document.getElementById('bt1').value = 'Hide Layer     \u2228';
    document.getElementById(id).style.display = 'inline';
    }
}

</script>

HTML

<table>
  <tr>
    <td scope="col">
    <input class="bt" width="100%" type=button name=type id='bt1' value='Story &nbsp;&nbsp;&nbsp;&nbsp; &#62;' onclick="setVisibility('sub3');";>
    </td>
  </tr>
  <tr>
    <td>
        <div id="sub3">
            <p>Loren Ipsum</p>
            <p>&nbsp;</p>
        </div>
    </td>
  </tr>
</table>

Answer 1

使用this关键字对所点击的元素进行引用，如下所示：

 <input class="bt" width="100%" type=button name=type id='bt1' value='Story &nbsp;&nbsp;&nbsp;&nbsp; &#62;' onclick="setVisibility(this);";>

然后您可以按如下方式访问函数中的元素：

function setVisibility(element) {
  // now element refers to the clicked element
  id = element.id;
  value = element.value;

  //rest of your logic
  if(document.getElementById('bt1').value=='Hide Layer     \u2228')
  {
   document.getElementById('bt1').value = 'Show Layer     \x3E';
   document.getElementById(id).style.display = 'none';
  }
  else
  {
   document.getElementById('bt1').value = 'Hide Layer     \u2228';
   document.getElementById(id).style.display = 'inline';
 }
}

Answer 2

将按钮作为附加参数传递：

<input class="bt" width="100%" type=button name=type id='bt1' value='Story &nbsp;&nbsp;&nbsp;&nbsp; &#62;' onclick="setVisibility(this,'sub3');">

的JavaScript

function setVisibility(btn,id) {

if(btn.value=='Hide Layer     \u2228')

    {
    btn.value = 'Show Layer     \x3E';
    document.getElementById(id).style.display = 'none';
    }
    else
    {
    btn.value = 'Hide Layer     \u2228';
    document.getElementById(id).style.display = 'inline';
    }
}

Answer 3

将div id和button id传递给setVisibility()函数

使用此代码

<table>
    <tr>
        <td scope="col">
          <input class="bt" width="100%" type=button name=type id='bt1' value='Story &nbsp;&nbsp;&nbsp;&nbsp; &#62;' onclick="setVisibility('sub3',this);";>
        </td>
   </tr>
   <tr>
      <td>
          <div id="sub3">
                <p>Loren Ipsum</p>
                <p>&nbsp;</p>
           </div>
      </td>
    </tr>
    <tr>
        <td scope="col">
          <input class="bt" width="100%" type=button name=type id='bt2' value='Story &nbsp;&nbsp;&nbsp;&nbsp; &#62;' onclick="setVisibility('sub3',this);";>
        </td>
    </tr>
 </table>


<script language="JavaScript">
function setVisibility(id,btn_id) {
alert(id+"   "+btn_id.id);
var button_id=btn_id.id;
if(document.getElementById(button_id).value=='Hide Layer     \u2228')

    {
    document.getElementById(button_id).value = 'Show Layer     \x3E';
    document.getElementById(id).style.display = 'none';
    }
    else
    {
    document.getElementById(button_id).value = 'Hide Layer     \u2228';
    document.getElementById(id).style.display = 'inline';
    }
}

</script>

移动设备上的可折叠菜单

3 个答案: