圖像畫廊無法正確顯示與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（）

回答

相關問題