getElementsByClassName不起作用，而ID起作用。 为什么？

Question

我同时使用getElementsByClassName和getElementById 。 后一个（ID）在起作用，但Class在不起作用。 我有多个td所以我想使用类而不是ID，但是它不起作用。 问题出在哪里？

<table>
<tr>
<td>ID</td>
<td><span style="vertical-align:middle;">Id is</span>
<a class="fancybox fancybox.iframe" href="#" title="Book ID" onmouseover="document.getElementById('viewa').src='images/edit.png';" onmouseout="document.getElementById('viewa').src='';"><img src="" id="viewa" align="right" width="15px" height="15px" /></a></td>
</tr>

<tr>
<td>Book Name</td>
<td><span style="vertical-align:middle;">Name is </span>
<a class="fancybox fancybox.iframe" href="#" title="Book Name" onmouseover="document.getElementsByClassName('viewb').src='images/edit.png';" onmouseout="document.getElementsByClassName('viewb').src='';"><img src="" class="viewb" align="right" width="15px" height="15px" /></a></td>
</tr>

</table>

Answer 1

如果您可以使用jquery，则可以检查以下答案。 但是，如果您真的想使用普通的javascript，则可以尝试以下代码。

<table>
<tr>
<td>ID</td>
<td><span style="vertical-align:middle;">Id is</span>
<a class="fancybox fancybox.iframe" href="#" title="Book ID" 
onmouseover="onmouseoverevent(this)" onmouseout="onmouseoutevent(this)"><img 
src="" id="viewa" align="right" width="15px" height="15px" /></a></td>
</tr>

<tr>
<td>Book Name</td>
<td><span style="vertical-align:middle;">Name is </span>
<a class="fancybox fancybox.iframe" href="#" title="Book Name" 
onmouseover="onmouseoverevent(this)" onmouseout="onmouseoutevent(this)"><img 
src="" class="viewb" align="right" width="15px" height="15px" /></a></td>
</tr>

</table>

<script>

function onmouseoverevent(elem)
{
elem.getElementsByTagName('img')[0].src='images/edit.png';
}

function onmouseoutevent(elem)
{
elem.getElementsByTagName('img')[0].src='';
}
</script>

Answer 2

由于ID是唯一的，因此GetElementById返回单个元素。 但是类不是，因此GetElementsByClassName返回一个元素数组。

因此，例如，您必须使用GetElementsByClassName("foo")[0]来获取具有foo类的第一个元素。

而且，如果要在类的所有元素上执行它，则必须执行for循环。

Answer 3

将内联原始JavaScript注入HTML属性中，这超出了使用库的目的（无论如何您都不使用）。 明智的jQuery习惯用法是这样的：

 jQuery(function($){ $("table a") .on("mouseover", function(){ $(this).find("img").attr("src", "http://placehold.it/15x15"); }) .on("mouseout", function(){ $(this).find("img").attr("src", ""); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr> <td>ID</td> <td><span style="vertical-align:middle;">Id is</span> <a class="fancybox fancybox.iframe" href="#" title="Book ID"><img src="" id="viewa" align="right" width="15px" height="15px" /></a></td> </tr> <tr> <td>Book Name</td> <td><span style="vertical-align:middle;">Name is </span> <a class="fancybox fancybox.iframe" href="#" title="Book Name"><img src="" class="viewb" align="right" width="15px" height="15px" /></a></td> </tr> </table> 

如果您还放弃了内联CSS而改用正确的样式表，则代码的可维护性肯定会得到改善。