Javascript - 更改所有類的ID範圍除外1

我有一個基本的圖像庫，我已經創建。我想突出顯示當前正在查看的圖像編號。Javascript - 更改所有類的ID範圍除外1

我有下面的代碼，它的工作原理是一樣的，但是非常麻煩，並且必須有一個更好的方法來實現它！

function changeImg(imgId) { 
 
    document.getElementById('img').src = 'thumbs/' + imgId + '.jpg'; 
 
    
 
    if (imgId == '1') { 
 
    document.getElementById('1').className = 'gallery-nav-link-current'; 
 
    document.getElementById('2').className = 'gallery-nav-link'; 
 
    document.getElementById('3').className = 'gallery-nav-link'; 
 
    } else if (imgId == '2') { 
 
    document.getElementById('1').className = 'gallery-nav-link'; 
 
    document.getElementById('2').className = 'gallery-nav-link-current'; 
 
    document.getElementById('3').className = 'gallery-nav-link'; 
 
    } else if (imgId == '3') { 
 
    document.getElementById('1').className = 'gallery-nav-link'; 
 
    document.getElementById('2').className = 'gallery-nav-link'; 
 
    document.getElementById('3').className = 'gallery-nav-link-current'; 
 
    } 
 
}

<a href="#" class="gallery-nav-link-current" id="1" onclick="changeImg(1)" ;>1</a> 
 
<a href="#" class="gallery-nav-link" id="2" onclick="changeImg(2)" ;>2</a> 
 
<a href="#" class="gallery-nav-link" id="3" onclick="changeImg(3)" ;>3</a> 
 
<img class="gallery-img" src="thumbs/1.jpg" id="img">

我現在有工作的代碼，但我想明白，並作出麻煩較少的代碼做突出。

感謝任何指針。

感謝，

巴丁格布魯斯

來源

2015-06-08 Dingo Bruce

請嘗試folliwng我們現在要做的是設定imgId電流，並檢查其他人如果不是同一imgId添加普通類：

<script> 
    function changeImg(imgId) { 
     document.getElementById('img').src = 'thumbs/'+imgId+'.jpg'; 
     document.getElementById(imgId).className = 'gallery-nav-link-current'; 
     for(i=1; i <= 3; i++)    
      if(imgId != i.toString()) 
      document.getElementById(i.toString()).className = 'gallery-nav-link'; 
     } 
    </script>

來源

2015-06-08 12:29:21

謝謝，這增加了我想要的。 –

也可以添加速記。對於（i = 1; i <= 3; i ++）{ } 「-current」：'';}' – Sarfaraaz

創建不需要強調ID數組。
在此陣列上循環以將gallery-nav-link類應用於與當前數組項目的id匹配的元素。
適用gallery-nav-link-current類輸入ID

來源

2015-06-08 12:22:19 DhruvPathak

Dhruv直升機嗨裏面！你能告訴我這樣做的代碼，不幸的是，我是一個JavaScript的初學者，所以你的回答對我沒有多大幫助。 –

這裏的一些改進代碼的想法。

由於參數'imgId'與DOM ID相匹配，因此您可以在不檢查的情況下設置當前鏈接。

document.getElementById(imgId).className = 'gallery-nav-link-current';

跟蹤當前鏈路ID在一個變量是什麼 - 爲了簡單起見，使用全局變量 - 且只有DOM元素重置爲畫廊，導航鏈接。

所以，你外面聲明功能

var lastNavLinkId = null;

然後，changeImg功能

if (lastNavLinkId) { 
    document.getElementById(lastNavLinkId).className = 'gallery-nav-link'; 
} 
lastNavLinkId = imgId;

來源

2015-06-08 12:32:58 Mike

Javascript - 更改所有類的ID範圍除外1

回答

相關問題