Question

我有一个我创建的基本图库。我想突出显示当前正在查看的图像编号。

我有以下代码按预期工作，但非常麻烦，必须有一个更好的方法来实现相同的目标！

＆＃13;

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';
  }
}

＆＃13;

<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">

＆＃13;

我现在使用的代码，但我想了解并制作一个不那么繁琐的代码来进行突出显示。

任何指针都非常感激。

谢谢，

Dingo Bruce

Answer 1

创建一个不需要突出显示的ID数组。
遍历此数组以将gallery-nav-link类应用于与当前数组项的ID匹配的元素。
将类gallery-nav-link-current应用于输入ID

Answer 2

请尝试下面我们在这里做的是将imgId设置为当前，如果不相同则检查其他imgId添加正常类：

=DATEVALUE(RIGHT(CELL,2)&"/"&LEFT(CELL,2))

Answer 3

这里有一些改进代码的想法。

由于参数'imgId'与DOM id匹配，因此您可以设置当前链接而不进行检查。

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

跟踪变量中当前链接ID的内容 - 为简单起见，使用全局变量 - 只将DOM元素重置为gallery-nav-link。

所以，在你之外的函数声明

var lastNavLinkId = null;

然后，在changeImg函数内部

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

Javascript - 更改除1之外的所有类别的id＆＃39; s

3 个答案: