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

FIDDLE

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

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>

FIDDLE

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

1 个答案: