如何将单击函数附加到没有ID的多个div上

Question

我想更好地理解我的功能。当我设置

我的问题是，如果我有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);
        }
    }
};

Answer 1

更正来自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"
}

Answer 2

您考虑过使用像jQuery这样的javascript库来管理它吗？他们有一些广泛的，非常容易使用的“选择器”，可以让您轻松地访问DOM中的元素，并使用诸如“淡入”和“幻灯片”之类的东西来动画它们。如果您需要更多的动画，有大量的插件可用于此。它也有助于应对浏览器兼容性方面的挑战。

如果您想依赖于纯JavaScript，可以使用document.getElementsByClassName()函数定义的这里，但该函数仅在IE9及以上以及Safari、Chrome、FF和Opera中定义。

Answer 3

正如注释中所说的，有一个getElementsByClassName()方法。这是你如何使用它。

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

我不确定getElementsByClassName()是否能一次检测到一个类名。你可能需要瑞吉来做这个。