更改元素ID並使用該ID的新功能

我想用javascript構建一個縮略圖幻燈片。我很新的Javascript，所以我的做法可能有點奇怪...更改元素ID並使用該ID的新功能

我遇到的問題是，我有一個主要圖像，然後我有4個縮略圖。當我點擊第一個縮略圖時，它會更改主圖像和第一個縮略圖。但是，當我點擊更改的縮略圖，它需要用不同的照片來改變主圖像（對應於新的縮略圖之一）

我初始化我的功能，像這樣的電話：

document.getElementById('thumb1').onclick=thumbs1;

使用這種功能：

function thumbs1(){ 
    num1 = 1; 
    num2 = 0; 
    var src1 = largeArray[num1]; 
    var src2 = thumbArray[num2]; 
    document.getElementById('main').src=src1; 
    document.getElementById('one').src=src2; 
    document.getElementById('one').id='change'; 
}

，我試圖改變新的縮略圖，以「變」的ID並調用另一個這樣的功能：

document.getElementById('change').onclick=changed;

而這使用了下列功能：

function changed(){ 
    num1 = 0; 
    var src1 = largeArray[num1]; 
    document.getElementById('change').src=src1; 
    document.getElementById('change').id='one'; 
}

當使用螢火蟲，我發現了錯誤，我相信這是由以下事實導致調用document.getElementById('change').onclick=changed;。瀏覽器找不到元素ID「更改」，因爲我還沒有調用改變ID的函數。

有誰知道如何解決這個問題。（我知道代碼是低質量的。我教我的自我）

這裏是一個活鏈接到頁面：My Page

感謝您的幫助！

來源

2012-12-03 Chris Frank

恕我直言 - 更好的是，恕我直言，保持圖像的ID不變，每次點擊時改變src屬性。 –

當圖像在第一次點擊後發生變化時，我需要調用另一個函數將主圖像更改爲默認圖像。我如何在相同的ID上調用函數，但將其更改爲不同的SRC？感謝您及時的回覆！ –

var array = //id's of your images here. you could type them static or search your document for images and get their id attribute. 

document.addEventListener("click", function(e){ 
    var clicked_image = e.target || e.srcElement; //using jquery can help with this cause older versions of IE are stupid, but depends on if you want to support them. 
    var id = clicked_image.getAttribute(id); 
    var temp = document.getElementById("main").src; 

    for (var i = 0; i < array.length; i++){ 
     if(array[i] == id){ 
      document.getElementById("main").src = clicked_image.src; 
      clicked_image.src = temp; 
     } 
    } 
})

這是相當快速和骯髒的，你會過得更好分配eventlisteners只圖像。你會使用與上面相同的語法，但它應該讓你知道該怎麼做。

有了這個，你不必擔心點擊了什麼圖像，只需更改主體，然後將拇指改爲主體。所以你消除了試圖追蹤每幅圖像的麻煩。

來源

2012-12-03 04:19:32 Ryan

此外，既然你學習JavaScript，我會遠離jquery。一旦你有一個堅實的基礎，你知道發生了什麼，然後jquery可以採取選擇器和跨瀏覽器廢話的一些痛苦。 – Ryan

謝謝你的幫助！在過去的一年中，我一直在使用jQuery，並且它肯定阻礙了我學習Javascript的能力。但我現在正在修復這個問題。再次感謝！ –

@ChrisFrank是的，這是我在web開發人員看到的最糟糕的事情之一，如果jquery沒有內置的函數/插件來完成他們想做的事，他們不知道該怎麼做。 – Ryan

更改元素ID並使用該ID的新功能

回答

相關問題