Javascript 如何将单击功能附加到多个没有ID的div

我有一个淡入函数，我想更好地理解它。当我设置

我的问题是，如果我有8个链接已经有了单独的ID和类名，我如何将此函数附加到每个可单击的链接

是否有一个函数来getElementbyClass或其他什么，然后将该类添加到我的所有链接中

以下是我的javascript：

var done = true,
    fading_div = document.getElementById('fading_div'),
    fade_in_button = document.getElementById('fade_in'),
    fade_out_button = document.getElementById('fade_out');

function function_opacity(opacity_value) {
    fading_div.style.opacity = opacity_value / 100;
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}

function function_fade_out(opacity_value) {
    function_opacity(opacity_value);
    if (opacity_value == 1) {
        fading_div.style.display = 'none';
        done = true;
    }
}

function function_fade_in(opacity_value) {
    function_opacity(opacity_value);
    if (opacity_value == 1) {
        fading_div.style.display = 'block';
    }
    if (opacity_value == 100) {
        done = true;
    }
}
// fade in button
fade_in_button.onclick = function () {
    if (done && fading_div.style.opacity !== '1') {
        done = false;
        for (var i = 1; i <= 100; i++) {
            setTimeout((function (x) {
                return function () {
                    function_fade_in(x)
                };
            })(i), i * 10);
        }
    }
};
// fade out button
fade_out_button.onclick = function () {
    if (done && fading_div.style.opacity !== '0') {
        done = false;
        for (var i = 1; i <= 100; i++) {
            setTimeout((function (x) {
                return function () {
                    function_fade_out(x)
                };
            })(100 - i), i * 10);
        }
    }
};

var done=true，
淡入淡出=document.getElementById（'淡入淡出淡出淡出'），
淡入淡入按钮=document.getElementById（“淡入淡入”），
淡出按钮=document.getElementById（“淡出”）；
函数不透明度（不透明度值）{
淡入度_div.style.opacity=不透明度_值/100；
淡入淡出_div.style.filter='alpha（不透明度='+不透明度_值+'）；
}
函数淡入淡出（不透明度值）{
函数不透明度（不透明度值）；
如果（不透明度_值==1）{
淡入淡出的div.style.display='none'；
完成=正确；
}
}
函数淡入（不透明度值）{
函数不透明度（不透明度值）；
如果（不透明度_值==1）{
淡入淡出的div.style.display='block'；
}
如果（不透明度_值==100）{
完成=正确；
}
}
//淡入按钮
淡入按钮。单击=功能（）{
如果（完成和褪色\u div.style.opacity！='1'）{
完成=错误；
对于（var i=1；i您是否考虑过使用像jQuery这样的javascript库来管理它。它们有一些广泛的、非常易于使用的“选择器”，允许您轻松访问DOM中的元素，并使用诸如“淡入”和“幻灯片”之类的东西来设置它们的动画，等等。如果你需要更多的动画，有很多插件可供使用。这也有助于应对浏览器兼容性的挑战

如果您想依赖纯JavaScript，可以使用定义的document.getElementsByClassName（）函数，但该函数仅在IE9及以上版本以及Safari、Chrome、FF和Opera中定义。
如注释中所述，有一个
getElementsByClassName（）方法。
下面是您将如何使用它

for(var i=0; i<document.getElementsByClassName("fade").length; i++ ){
    /*apply fade in function*/
}

for（var i=0；i更正BLiu1的答案：

var fadeDivs = document.getElementsByClassName('fade');
for (var i=0, i<fadeDivs.length, i++){
// do stuff to all fade-divs by accessing them with "fadeDivs[i].something"
}

var fadeDivs=document.getElementsByClassName（'fade'）；
对于（var i=0，这里有一个方法。
.getElementsByClassName（）
，
.querySelectorAll（）
，或者你将成为这里的朋友。因此，只需将此添加到我的当前代码中，并将clas淡入我的所有div？原始选择器是淡入，这没有什么区别吗？是的，你只需在任何你想对你的div做些什么的地方编写此代码，在我编写注释的地方，插入你想应用于eve的代码ry div。要引用div，请使用“fadeDivs[i]（您的代码）”。这样，您就可以访问fadeDivs数组中的div，该数组的索引为'i'。如何调用您的类取决于您自己，只要与它保持一致，它就会起作用。您是否介意将我的代码添加到您的答案中，以向我展示如何使用它。