如何在一个函数内组合多个显示分配

Question

这里是没有经验的开发者。现在我的函数 showTeal() 更改了两个变量的显示属性，并确保其余变量保持设置为 display = "none"; 以确保在函数运行时仅显示某些变量。它有效，但我知道必须有更短的方法来做到这一点。对钢笔其他方面的任何建议也非常感谢。

这是笔：https://codepen.io/aubreywarpool/pen/LwxNyG

    function showTeal(){
      tealtray.style.display = "inline";
      tealroller.style.display = "inline";
      bg.style.animation = "tealbg 4s";
      pinkroller.style.display = "none";
      skyroller.style.display = "none";
      blueroller.style.display = "none";
      pinktray.style.display = "none";
      skytray.style.display = "none";
      bluetray.style.display = "none";
    }

Answer 1

更好的解决方案是按 class 对事物进行分组，以便将它们作为一个组访问。如果您将 'tray' 和 'roller' class 分别添加到您的 IMG 标签，您可以通过查询 select 或

访问它们

let rollers=document.querySelectorAll(".roller");
let trays=document.querySelectorAll(".tray");

然后你可以修改整个组：

function showTeal(){
    rollers.forEach( roller => roller.style.display = "none");
    trays.forEach( tray => tray.style.display = "none");
    tealtray.style.display = "inline";
    tealroller.style.display = "inline";
    bg.style.animation = "tealbg 4s";
}

或者，您可以使用 JS 库，例如 jQuery 来使这些类型的 select 或属性操作更容易。例如，使用 jQuery 您不需要提前创建组，您可以一次 select 多个查询：

function showTeal() {
    $(".rollers, .trays").hide();
    $("#tealtray, #tealroller").show();
    bg.style.animation = "tealbg 4s";
}

如何在一个函数内组合多个显示分配

How to Combine Multiple Display Assignments Inside One Function

javascript

function

display