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用于勇敢不行的人。但要用它。您可以删除对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);
    });
});

Answer 2

加载网站会产生javascript错误：“未捕获TypeError：对象＃没有方法'getElementByID'”

检查javascript，您的一些来电是getElementById，有些来自getElementByID。 Javascript区分大小写，你有一个错字。

使用document.getElementbyId（）无法正确显示图像库

2 个答案: