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

using System; using System.Linq; namespace ConsoleApp11 { public static class Base36 { private const string Digits = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; public static string ConvertToBase36(this int value) { string result = string.Empty; while (value > 0) { result = Digits[value % Digits.Length] + result; value /= Digits.Length; } return result; } public static int ConvertFromBase36(this string value) { return value.Reverse().Select((character, index) => (int)Math.Pow(Digits.Length, index) * Digits.IndexOf(character)).Sum(); } } class Program { static void Main() { var start = "D3A0"; var end = "D3AC"; var startNumber = start.ConvertFromBase36(); var endNumber = end.ConvertFromBase36(); while (startNumber < endNumber) { Console.WriteLine(startNumber.ConvertToBase36()); startNumber++; } Console.ReadLine(); } } }返回单个元素，因为ID是唯一的。但是类不是，所以GetElementById返回一个元素数组。

所以你必须使用GetElementsByClassName来获取类foo的第一个元素。

如果你想在课程的所有元素上执行它，你必须做一个for循环。

Answer 3

将内联的vanilla JavaScript注入HTML属性有点胜过使用库的目的（无论如何都不能使用它）。明智的jQuery习语会是这样的：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果你也摆脱了内联CSS，转而使用合适的样式表，代码可维护性肯定会提高。

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

3 个答案: