javascript - 使用 X 类 JavaScript 更改所有链接的颜色

Question

与示例链接

我正在使用以下功能：

<div align="center"><a href="#" onclick="changeColor('A'); return false;">A</a>
<script>
    function changeColor(id)
    {
        document.getElementById(id).style.color = "#FFF"; // forecolor
        document.getElementById(id).style.backgroundColor = "#ff0000"; // backcolor
    }
</script>

例如，当我单击示例页面上的 A 时，只有第一个链接会改变颜色，因为脚本正在通过 id 改变颜色。如何按类更改所有链接颜色？

我想要的是当我点击 A 时，所有具有 A 类的链接都应该改变它们的颜色，当我点击 B 时，所有具有 B 类的链接都应该改变它们的颜色，等等。

Answer 1

function changeColor( _class ) {
    var elems = document.getElementsByClassName( _class );
    for (var i=elems.length; i--;) {
        elems[i].style.color = "#FFF";
        elems[i].style.backgroundColor = "#ff0000";
    }
}

小提琴

将函数更改为上述函数，并将类传递给它？

jQuery版本：

$('div[align="center"] > a').on('click', function(e) {
    e.preventDefault();
    $('.' + $.trim($(this).text())).css({color: '#fff', backgroundColor: '#ff0000'});
});

使用 HTML

<div align="center"><a href="#">A</a></div>

小提琴