图像画廊无法正确显示与document.getElementbyId（）

因此，我正在为我的工作的商店，一种我们的产品画廊的网站工作。我已经得到了主要的网页，剪掉了脂肪，放进了肉里，并且一路上经过了无数次的测试。现在我遇到了JQuery不能正常工作的一些麻烦。我已经提供了直接链接到jQuery代码，网站本身，和下面的源代码的副本..图像画廊无法正确显示与document.getElementbyId（）

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，我需要给它一个......不同的，从正常的标签
（标签我想用：，16
标签我用：F_sixteen）

的然后程序就可以正常工作，直到36和40程序拒绝正确响应为止。

这是该网站的链接作为写这样一个问题：Here

这是一个链接到实际的jQuery代码：Here

并为那些对移动，链接到源代码：Here

我对这个问题的大小，以及如果这似乎很复杂道歉。感谢您查看此内容，因为我非常感谢您的帮助。

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

来源

2014-01-09 Firestar001

你没有使用jQuery' – adeneo

嘿嘿，显示了我对jQuery和Javascript等的了解。 – Firestar001

好吧，我讨厌将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); 
    }); 
});

来源

2014-01-09 20:41:49 johnnycardy

重构的一个很好的建议，但你不一定需要使用JavaScript来做到这一点。 – Snixtor

你的意思是jQuery？我同意......这只是稍微困难一点。 – johnnycardy

是的，我现在好打错了。是的，不幸的是，本地'getElementsByClassName'在早期的IE版本中没有更好的支持。 http://caniuse.com/getelementsbyclassname尽管给出了这个特定页面的HTML，但遍历'gallary' div中的所有元素都可以很好地工作。 – Snixtor

载入的网站会产生JavaScript错误：“遗漏的类型错误：对象＃有没有一种方法‘的getElementById’”

检查的JavaScript，一些你的电话是getElementById，有的是getElementByID。 Javascript是区分大小写的，你有一个错字。

来源

2014-01-09 20:50:04 Snixtor

是的，从'T_Thirty-nine'开始。 – johnnycardy

感谢您的帮助和指出。至于为什么网站不生产图像。在Safari上试用它似乎没有加载，但Firefox和Chrome导致正确的页面。 – Firestar001

图像画廊无法正确显示与document.getElementbyId（）

回答

相关问题