javascript - 图片库无法使用 document.getElementbyId() 正确显示

Question

所以我正在为我工​​作的商店开发一个网站，这是我们产品的一种画廊。我得到了主网页，去掉了脂肪，放入了肉，一路上测试了无数次。现在我遇到了 JQuery 无法正常工作的问题。我提供了 JQuery 代码的直接链接、网站本身的副本以及下面的源代码。

JQuery(或 Javascript，我不确定是哪个)的总体布局是:

window.onload = function() {

    function displayImage() {
        var mainImg = document.getElementById('Main_IMG');
        var caption = document.getElementById('caption');
        mainImg.src = this.src;
        caption.innerHTML = this.alt;
    }
    document.getElementById('Zero').onclick = displayImage;
    document.getElementById('One').onclick = displayImage;
    document.getElementById('Two').onclick = displayImage;
// Etc etc
}

这是网站的一部分(删除了一些多余的绒毛):

<h1 class="Wrapper Main ClearFix">Image Gallery</h1>
<div id="Main" class="Wrapper Main ClearFix">
<div id="container11">
<img id="Main_IMG" src="img/100___06/IMG_0001.JPG" alt=""><br>
<p id="caption"></p>
</div>
<div id="gallary">
<img id="One" src="img/100___06/IMG_0020.JPG" alt="Headboard   Pricing"> 
<img id="Two" src="http://images.craigslist.org/00P0P_84oo9H7byag_600x450.jpg" alt="Needle Point Upholstered Chair   Price: $40"> 
<!-- etc etc -->

程序很简单:当用户点击一张图片(例如在表格中)时，该图片将显示在图库的左侧，alt 标签是产品和价格等。

问题:在图像编号 16 处，我需要给它一个...不同于正常的标签
(我想使用的标签:十六。
我使用的标签:F_sixteen)

然后该程序可以正常处理更多的“数字”，直到 36 和 40 时程序拒绝正确响应。

这是撰写此问题时的网站链接:Here

这是指向实际 jquery 代码的链接:Here

对于移动端用户，源代码链接为:Here

对于这个问题的规模，以及这看起来是否复杂，我深表歉意。感谢您查看此内容，感谢您提供的任何帮助。

编辑: 我不确定该网页是否可以在 Safari 中运行。如果没有，我会看看我能做些什么来改变它。

Answer 1

好吧，我不想向那些勇敢地不使用 jQuery 的人建议使用 jQuery。但是使用它。您可以减少对 document.getElementById 的 40 次调用并降低拼写错误的风险。只需在您的页面中包含 jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

然后你可以使用下面的代码:

window.onload = function() {

    function displayImage(img) {
        var mainImg = document.getElementById('Main_IMG');
        var caption = document.getElementById('caption');
        mainImg.src = img.src;
        caption.innerHTML = img.alt;
    }

    $("#gallary img").click(function(){
        displayImage(this);
    });
}

我已将上述代码中所需的更改保持在最低限度。要进一步“jquerify”它，您可以改为编写以下等效代码:

$(function(){
    var mainImg = $('#Main_IMG');
    var caption = $('#caption');
    $("#gallary img").click(function(){
        mainImg.attr('src', this.src);
        caption.html(this.alt);
    });
});