如何在不传递按钮 id 的情况下突出显示单击的按钮？答案

【问题标题】：HOW TO highlight the clicked button, without passing the id of the button?如何在不传递按钮 id 的情况下突出显示单击的按钮？
【发布时间】：2015-06-24 07:35:09
【问题描述】：

我有 4 个具有相同 id 的按钮（用于 css 目的）我想在单击按钮后突出显示该按钮。通过传递 id 它工作正常，但我想传递按钮的名称（唯一名称）。当我尝试 getElementByNames() 它不起作用。这是具有不同 ID 的代码，我想要不同的名称

    <html>
   <head>
<style type="text/css">

</style>
<script type="text/javascript">
    var buttonClicked = null;
  function highlight(id)
   {
    if(buttonClicked != null)
    {
        buttonClicked.style.background = "grey";
        buttonClicked.style.color="black";
    }

     buttonClicked  = document.getElementById(id);
    buttonClicked.style.background =  "blue";
    buttonClicked.style.color="white";
   }
</script>
</HEAD>
<BODY>
<table width="100%" cellspacing="0" cellpadding="3px">
    <tr>
        <td>
                <input type="button" value="BUTTON" id="select1" name="select1"  onclick="highlight('select1')">
        </td>
        <td>
                <input type="button" value="BUTTON" id="select2" name="select2" onclick="highlight('select2')">
        </td>
        <td>
 <input type="button" value="BUTTON" id="select3" name="select3" onclick="highlight('select3')">
 </td>
 <td>
<input type="button" value="BUTTON" id="select4" name="select4"  onclick="highlight('select4')">
        </td>
    </tr>
</table>
</BODY>
</HTML>

【问题讨论】：

ID 是唯一的！您不能有两个具有相同 id 的元素或具有两个 id 的元素。您的 css 或 js 将始终为此出错。如果你想引用更多具有相同 CSS 规则的项目，请参考一个公共类！

标签： javascript html

【解决方案1】：

您的问题有点不清楚 - 您说“我有 4 个具有相同 ID 的按钮”，但在您的代码中它们具有不同的 ID。如果您确实“有 4 个具有相同 id 的按钮（用于 css 目的）”，那么：

如果要将 CSS 样式应用于多个元素，则应使用类而不是 ID。然后你可以为你的按钮使用唯一的 ID，你现有的代码就会很好地工作。

<style>
.myclass {
    color: red; // CSS rules for all these buttons
}
</style>

<input type="button" id="select1" class="myclass" ...
<input type="button" id="select2" class="myclass" ...

【讨论】：

【解决方案2】：

如果你想通过他的名字选择一个元素，你可以使用这个代码：

buttonClicked  = document.getElementsByName(id)[0];

只要您可以保证名称是唯一的，它就可以正常工作，因为将采用第一个元素。但这不是最好的方法...

【讨论】：

【解决方案3】：

当然，就像 Richie 所说，您应该为 css 使用一个类并定义不同的 id。无论如何，如果您想坚持使用相同的 ID，您可以使用不同的方法：

<script type="text/javascript">
var buttonClicked = null;

function highlight(element) {
    if (buttonClicked != null) {
        buttonClicked.style.background = "grey";
        buttonClicked.style.color = "black";
    }
    buttonClicked = element;
    buttonClicked.style.background = "red";
    buttonClicked.style.color = "white";
}
</script>
<table width="100%" cellspacing="0" cellpadding="3px">
<tr>
    <td>
        <input type="button" value="BUTTON1" id="select1" name="select1" onclick="highlight(this)" />
    </td>
    <td>
        <input type="button" value="BUTTON2" id="select2" name="select2" onclick="highlight(this)" />
    </td>
    <td>
        <input type="button" value="BUTTON3" id="select3" name="select3" onclick="highlight(this)" />
    </td>
    <td>
        <input type="button" value="BUTTON4" id="select4" name="select4" onclick="highlight(this)" />
    </td>
</tr>
</table>

小提琴：http://jsfiddle.net/9nq39hov/

【讨论】：