Question

我有以下脚本：

<script>
  window.now = some_int_value;
</script>

以及以下html：

<span class="dot"></span>&nbsp;
<span class="dot active"></span>&nbsp;
<span class="dot"></span>&nbsp;
<span class="dot"></span>&nbsp;

我应该如何根据window.now值更改点的样式？所以，如果它等于1，那么第一个点应该是'dot active'，如果等于2，那么第二个，依此类推。

Answer 1

document.getElementsByClassName("dot")[window.now-1].className += " active";

你可以这样做（对于IE9 +和所有其他主流浏览器）。

或者您可以使用

document.querySelectorAll(".dot")[window.now-1].className += " active";

适用于IE8 +，FF3 +以及所有其他主流浏览器。

或者你可以将它们组合起来

if(document.getElementsByClassName);
    document.getElementsByClassName("dot")[window.now-1].className += " active";
else if(document.querySelectorAll)
    document.querySelectorAll(".dot")[window.now-1].className += " active";

Compatibility Documentation

Answer 2

您应该考虑查看jQuery，这样可以简化DOM的使用过程。

这是jQuery中指标所需要的全部内容：

$('span.dot').eq(window.now - 1).addClass('active');

不再

“也许我应该为每个点分配一个ID”
“getElementByTagName（）未在某个或多或少的模糊浏览器中实现”。
“这在IE8中不起作用”
...

Answer 3

这应该这样做：

var dots = document.querySelectorAll( '.dot' );

[].slice.call( dots ).forEach( function ( dot, i ) {
    dot.className = 'dot' + ( window.now === i + 1 ? ' active' : '' );
});

（这在IE8中不起作用。）

现场演示： http://jsfiddle.net/dKDLx/

（演示显示即使2.点设置了“活动”类，window.now = 3;也会使该类“移动”到3.点。）

Answer 4

这绝不是一个四点进度条/悸动者？如果是这样，我会说只使用一个gif - 有一个网站可以为你生成它们：http://preloaders.net/

如何根据javascript变量值更改元素类？

4 个答案: