时间戳

首页 > 解决方案 > 如何在一个函数中组合多个显示分配

javascript - 如何在一个函数中组合多个显示分配

问题描述

这里没有经验的开发人员。现在，我的函数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";
    }

标签： javascriptfunctiondisplay

解决方案

更好的解决方案是按类对事物进行分组以将它们作为一个组访问。如果您分别在 IMG 标签中添加“托盘”和“滚筒”类，则可以通过查询选择器访问它们

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）来简化这些类型的选择器和属性操作。例如，使用 jQuery，您无需提前创建组，您可以一次选择多个查询：

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

推荐阅读