是否有一种方法来简化这个javascript代码?我想让我的javascript代码短而简单

Question

我想问一下这段代码是否可以简化?我的代码看起来太长了。我想让它更简单和简短的代码，但提供相同的结果。抱歉问了这么愚蠢的问题。非常感谢。

// select element by id
var ctaRedWine = document.getElementById("cta_redwine");
var ctaPurpleWine= document.getElementById("cta_purplewine");
var ctaWhiteWine = document.getElementById("cta_whitewine");
ctaRedWine.onclick = function() {
document.getElementById("indicator_1").style.opacity = "1";
document.getElementById("indicator_2").style.opacity = "0";
document.getElementById("indicator_3").style.opacity = "0";
document.getElementById("hero_redwine").style.opacity = "1";
document.getElementById("hero_purplewine").style.opacity = "0";
document.getElementById("hero_whitewine").style.opacity = "0";

}
ctaPurpleWine.onclick = function() {
document.getElementById("indicator_1").style.opacity = "0";
document.getElementById("indicator_2").style.opacity = "1";
document.getElementById("indicator_3").style.opacity = "0";
document.getElementById("hero_redwine").style.opacity = "0";
document.getElementById("hero_purplewine").style.opacity = "1";
document.getElementById("hero_whitewine").style.opacity = "0";
}
ctaWhiteWine.onclick = function() {
document.getElementById("indicator_1").style.opacity = "0";
document.getElementById("indicator_2").style.opacity = "0";
document.getElementById("indicator_3").style.opacity = "1";
document.getElementById("hero_redwine").style.opacity = "0";
document.getElementById("hero_purplewine").style.opacity = "0";
document.getElementById("hero_whitewine").style.opacity = "1";
}

谢谢你们了!

Answer 1

只需将所需的内容包装在一个方便的函数中。

// select element by id
const $ = (el) => document.getElementById(el)
var ctaRedWine = $("cta_redwine");
var ctaPurpleWine= $("cta_purplewine");
var ctaWhiteWine = $("cta_whitewine");
ctaRedWine.onclick = function() {
$("indicator_1").style.opacity = "1";
$("indicator_2").style.opacity = "0";
$("indicator_3").style.opacity = "0";
$("hero_redwine").style.opacity = "1";
$("hero_purplewine").style.opacity = "0";
$("hero_whitewine").style.opacity = "0";
}
ctaPurpleWine.onclick = function() {
$("indicator_1").style.opacity = "0";
$("indicator_2").style.opacity = "1";
$("indicator_3").style.opacity = "0";
$("hero_redwine").style.opacity = "0";
$("hero_purplewine").style.opacity = "1";
$("hero_whitewine").style.opacity = "0";
}
ctaWhiteWine.onclick = function() {
$("indicator_1").style.opacity = "0";
$("indicator_2").style.opacity = "0";
$("indicator_3").style.opacity = "1";
$("hero_redwine").style.opacity = "0";
$("hero_purplewine").style.opacity = "0";
$("hero_whitewine").style.opacity = "1";
}

或者更进一步:

// select element by id
const $ = (el) => document.getElementById(el)
const $opacity = (el, opacity) => document.getElementById(el).style.opacity = opacity
var ctaRedWine = $("cta_redwine");
var ctaPurpleWine= $("cta_purplewine");
var ctaWhiteWine = $("cta_whitewine");
ctaRedWine.onclick = function() {
$opacity("indicator_1", "1");
$opacity("indicator_2", "0");
$opacity("indicator_3", "0");
$opacity("hero_redwine", "1");
$opacity("hero_purplewine", "0");
$opacity("hero_whitewine", "0");
}
ctaPurpleWine.onclick = function() {
$opacity("indicator_1", "0");
$opacity("indicator_2", "1");
$opacity("indicator_3", "0");
$opacity("hero_redwine", "0");
$opacity("hero_purplewine", "1");
$opacity("hero_whitewine", "0");
}
ctaWhiteWine.onclick = function() {
$opacity("indicator_1", "0");
$opacity("indicator_2", "0");
$opacity("indicator_3", "1");
$opacity("hero_redwine", "0");
$opacity("hero_purplewine", "0");
$opacity("hero_whitewine", "1");
}

我同意其他的评论，虽然这可能是更好的通过应用CSS样式父元素和CSS规则应用到子元素的不透明度。

Answer 2

我可以看到你在每个函数中做了两件事

1. 重置为默认值
2. 更改某些项目的不透明度

所以我的建议是创建一个名为resetOpacity的新函数，它将所有元素的不透明度设置为0，并在每个onclick

中使用它

// select element by id
var ctaRedWine = document.getElementById("cta_redwine");
var ctaPurpleWine= document.getElementById("cta_purplewine");
var ctaWhiteWine = document.getElementById("cta_whitewine");
var resetOpacity = function () {
document.getElementById("indicator_1").style.opacity = "0";
document.getElementById("indicator_2").style.opacity = "0";
document.getElementById("indicator_3").style.opacity = "0";
document.getElementById("hero_redwine").style.opacity = "0";
document.getElementById("hero_purplewine").style.opacity = "0";
document.getElementById("hero_whitewine").style.opacity = "0";
}
ctaRedWine.onclick = function() {
resetOpacity();
document.getElementById("indicator_1").style.opacity = "1";
document.getElementById("hero_redwine").style.opacity = "1";
}
ctaPurpleWine.onclick = function() {
resetOpacity();
document.getElementById("indicator_2").style.opacity = "1";
document.getElementById("hero_purplewine").style.opacity = "1";
}
ctaWhiteWine.onclick = function() {
resetOpacity();
document.getElementById("indicator_3").style.opacity = "1";
document.getElementById("hero_whitewine").style.opacity = "1";
}

然后可以将document.getElementById...抽象为单个函数

// select element by id
var ctaRedWine = document.getElementById("cta_redwine");
var ctaPurpleWine= document.getElementById("cta_purplewine");
var ctaWhiteWine = document.getElementById("cta_whitewine");
var setOpacity = function (elementId, opacity) {
document.getElementById(elementId).style.opacity = opacity;
}
var resetOpacity = function () {
setOpacity("indicator_1", "0");
setOpacity("indicator_2", "0");
setOpacity("indicator_3", "0");
setOpacity("hero_redwine", "0");
setOpacity("hero_purplewine", "0");
setOpacity("hero_whitewine", "0");
}
ctaRedWine.onclick = function() {
resetOpacity();
setOpacity("indicator_1", "1");
setOpacity("hero_redwine", "1");
}
ctaPurpleWine.onclick = function() {
resetOpacity();
setOpacity("indicator_2", "1");
setOpacity("hero_purplewine", "1");
}
ctaWhiteWine.onclick = function() {
resetOpacity();
setOpacity("indicator_3", "1");
setOpacity("hero_whitewine", "1");
}

Answer 3

如果你只是想让这段代码更短，你可以有一个单一的setter，它知道要设置什么，只期望不透明度的值:

var ctaRedWine = document.getElementById("cta_redwine");
var ctaPurpleWine = document.getElementById("cta_purplewine");
var ctaWhiteWine = document.getElementById("cta_whitewine");
var elementList=["indicator_1","indicator_2","indicator_3",
"hero_redwine","hero_purplewine","hero_whitewine"];
function setOpacities() {
for(var i=0;i<elementList.length;i++)
document.getElementById(elementList[i]).style.opacity=arguments[i];
}
ctaRedWine.onclick = function() {
setOpacities(1,0,0,1,0,0);
}
ctaPurpleWine.onclick = function() {
setOpacities(0,1,0,0,1,0);
}
ctaWhiteWine.onclick = function() {
setOpacities(0,0,1,0,0,1);
}

实际的缺点是，如果您想修改其中的任何内容，遵循解耦的标识符-值对需要监视，并且很容易搞砸。

Answer 4

我个人会使用for循环和对象。

然后，如果你需要添加一个部分来隐藏或显示到你的文档，你只需要添加一个对象到数组。

如果添加了新颜色，可以通过为所有对象添加新键来处理。

// select element by id
var ctaRedWine = document.getElementById("cta_redwine");
var ctaPurpleWine = document.getElementById("cta_purplewine");
var ctaWhiteWine = document.getElementById("cta_whitewine");
const objects = [
{id: "indicator_1",red: 1,purple: 0,white: 0},
{id: "indicator_2",red: 0,purple: 1,white: 0},
{id: "indicator_3",red: 0,purple: 0,white: 1},
{id: "hero_redwine",red: 1,purple: 0,white: 0},
{id: "hero_purplewine",red: 0,purple: 1,white: 0},
{id: "hero_whitewine",red: 0,purple: 0,white: 1}
]
const setOpacity = (key) => {
objects.forEach(obj => document.getElementById(obj.id).style.opacity = obj[key])
}
ctaRedWine.onclick = () => setOpacity("red")
ctaPurpleWine.onclick = () => setOpacity("purple")
ctaWhiteWine.onclick = () => setOpacity("white")

Answer 5

你可以预先定义一个数组，其中包含使用一个简单的for循环所需的所有信息。

const wines = [
{ wine: "red"   , indicator: 1 },
{ wine: "purple", indicator: 2 },
{ wine: "white" , indicator: 3 },
];
for (const {wine, indicator} of wines) {
document.getElementById(`cta_${wine}wine`).onclick = function () {
for (const {wine, indicator} of wines) {
document.getElementById(`indicator_${indicator}`).style.opacity = "0";
document.getElementById(`hero_${wine}wine`).style.opacity = "0";
}
document.getElementById(`indicator_${indicator}`).style.opacity = "1";
document.getElementById(`hero_${wine}wine`).style.opacity = "1";
};
}

然而，就像在评论中提到的那样，使用元素类和相关的CSS可能是一个更好的解决方案。