每5秒切换class的display规则时两个embed元素均不显示问题排查

你的代码存在两个核心错误：

• 条件判断中误用了赋值运算符=，而非比较运算符===。if(all[i].style.display = "none")的作用不是判断当前display是否为none，而是直接给display赋值为none，且赋值表达式的返回值为"none"，转布尔值为true，所以第一个if分支必然会执行，将display改为block。
• 两个if是独立执行的顺序逻辑，没有互斥关系。第一个if将display改为block后，第二个if同样是先执行赋值all[i].style.display="block"，返回值转布尔值为true，所以第二个if分支也必然会执行，最终把display改为none。

两个错误叠加后，不管元素初始状态是什么，每次执行test函数后所有元素的display都会被设为none，自然就出现两个元素都不显示的问题。

直接通过三元运算符切换状态即可，不需要写多个判断分支，修改后的test函数如下：

function test(){
    console.log('starting');
    var all = document.getElementsByClassName('pdfEmbed');
    for (var i = 0; i < all.length; i++) {
        // 当前是隐藏就改成显示，当前是显示就改成隐藏
        all[i].style.display = all[i].style.display === "none" ? "block" : "none";
    }
}

如果习惯用if分支写法，可以改成互斥的if-else结构：

function test(){
    console.log('starting');
    var all = document.getElementsByClassName('pdfEmbed');
    for (var i = 0; i < all.length; i++) {    
        if(all[i].style.display === "none"){
            all[i].style.display = "block";
        } else {
            all[i].style.display = "none";
        }
    }
}

修改后即可实现两个embed元素5秒交替显示的效果。

内容的提问来源于stack exchange，提问作者Geoff_S