Question

我尝试使用更改传递给函数参数的类的不透明度作为元素。它似乎崩溃，因为它到达＆＃34; target.style.opacity = newSetting＆＃34; 我不确定是什么导致了这个问题，因为当我使用getElementById时，它会起作用。

这里是Javascript

var fade_out_from = 10;
function fadeOut(element)
{
    moving = true;
    var target = document.getElementsByClassName(element);
    var newSetting = fade_out_from / 10;
    target.style.opacity = newSetting;
    fade_out_from--;
    if(fade_out_from == 0){
        target.style.opacity = 0;
        target.style.display = "none";
        clearTimeout(loopTimer);
        fade_out_from = 10;
        moving = false;
        return false;
    }
    var loopTimer = setTimeout(fadeOut(element),10);
}

Answer 1

document.getElementsByClassName返回元素列表（https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName），这就是target.style.opacity未定义的原因。而是尝试使用target[0].style.opacity（除非您实际需要处理多个找到的元素;在这种情况下，脚本将变得稍微复杂一点。）

但即便如此，由于您使用setTimeout（https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout）的方式，脚本也不会淡出元素。第一个参数应该是一个回调（只是一个函数的名称）。如果要传递参数，则需要将它们添加为第3，第4等参数（在IE＆lt; 9中不起作用。）

所以你的脚本可能看起来如下：

var fade_out_from = 10;
function fadeOut(element)
{
    moving = true;
    var target = document.getElementsByClassName(element);
    var newSetting = fade_out_from / 10;
    target[0].style.opacity = newSetting;
    fade_out_from--;
    if(fade_out_from == 0){
        target[0].style.opacity = 0;
        target[0].style.display = "none";
        clearTimeout(loopTimer);
        fade_out_from = 10;
        moving = false;
        return false;
    }
    var loopTimer = window.setTimeout(fadeOut,10, element);
}

Answer 2

所以这就是我出来的那个似乎可以解决问题的方法。您只需添加aditional“target [2] .style.opacity = setting”来考虑同一类中的其他元素。

var fade_out_from = 10;
var fadeTimer = setTimeout(function fadeOut(element){
    var target = document.getElementsByClassName(element);
    if(fade_out_from == 0){
        target[0].style.opacity = 0;
        target[1].style.opacity = 0;
        fade_out_from = 10;
        moving = false;
        clearTimeout(fadeTimer);
        return false;
    }
    moving = true;
    var newSetting = fade_out_from / 10;
    target[0].style.opacity = newSetting;
    target[1].style.opacity = newSetting;
    fade_out_from--;
    return true;
},50);

淡出使用getElementsByClassName

2 个答案: