在照片库中的两个元素之间切换样式会发生变化

Question

所以我的首页上有一个照片库，可以在两张图像之间切换；每个图像链接到不同的页面。现在，在那个画廊旁边，我有两个链接，指向同一个两页。这个想法是，当显示图像A时，侧链接A应该用边框突出显示。我一直遇到的问题是，一旦我把两边的链接都突出显示，我真的不知道如何把它取消突出显示。它们只是保持高亮显示，而不是与图像切换。

var debugLink = "#firstLink";
function displayNextImage()
{
	index++;
	
	if(index >= indexgalpics.length)
	{
		index=0;
	}
    //---this is where I set the var debugLink which is 
    //   supposed to carry the selected linke
	if(index == 0)
	{
		console.log("first link selected");
        //---when image A is showing, top side-link should be highlighted
        //---ok so we know this much works, it seems these double equal
		//   signs are very important here.
		//---makeActive();
		//---but once makeActive() is called here, it makes the first link 
		//   active for the entire time.
		//---we can't put the entire style code here because same as before,
		//   it just keeps the link highlighted forever
		debugLink = "#firstLink";
		//---ok so i can set a var at top to a value in the makeActive() function,
		//   but i think the way JS works highlights either one forever
		debugLink = "#firstLink";
	}
	else if(index == 1)
	{
		console.log("second link should be selected");
        //---when image B is showing, bottom side-link should be highlighted
		debugLink = "#secondLink";
	}
	showImg();
}
function makeActive()
{
	var activeLink = document.querySelector(debugLink);
	//---adds style to the debugLink
}

函数makeActive（）在函数showImg（）中调用，函数displayNextImage（）在另一个设置计时器的函数中调用。

Answer 1

我稍微改变了您的方法，为索引使用了布尔值，因为您似乎只需要两个状态。

这是一个修订版：

注意：在这段代码中，我使用了定制的函数，使代码更易于阅读。我创建了hasClass(el,class)、addClass(el,class)、removeClass(el,class)、toggleClass(el,class,bool)。你可以在最后的JS Fiddle中找到它们。

// Register the link elements
var links = {
    true : document.getElementById('firstLink'),
    false : document.getElementById('secondLink')
},
    // Keep track of selected link (replaces your 'index')
    leftLinkActive = false,
    // Just so you don't go get it every time
    gallery = document.getElementById('gallery');
// Let's trigger the gallery
displayNextImage();
// We'll change the active link and show the correct image
function displayNextImage(){
    leftLinkActive = !leftLinkActive;
    if(leftLinkActive){ console.log("first link selected"); }
    else{ console.log("second link selected"); }
    makeActive();
    showImg();
    // Let's do that again in 2 seconds
    setTimeout(displayNextImage,2000);
}
// Add / remove the active class
function makeActive(){
    addClass( links[ leftLinkActive ], 'active-class');
    removeClass( links[ !leftLinkActive ], 'active-class');
}
// Change the image with a small fadeOut transition
function showImg(){
    addClass(gallery,'fadeOut');
    setTimeout(function(){
        // Here we switch from img1 and img2
        gallery.style.backgroundImage = 'url('+(leftLinkActive?'im1.jpg':'im2.jpg')+')';
        removeClass(gallery,'fadeOut');
    },200);
}

JS Fiddle演示