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，可以使用定义为here的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()是否可以一次检测到一个类名。你可能需要正则表达式。

如何将click函数附加到没有ID的多个div

3 个答案: