简化JavaScript代码中的let和ifs_Javascript

简化JavaScript代码中的let和ifs

javascript

简化JavaScript代码中的let和ifs,javascript,Javascript,我有很多变量（let），每个变量都连接到一个将被替换的标记，并决定元素是否可见。如果被替换的标记有任何文本，它将是可见的，如果它没有任何文本，它将把元素类更改为具有display:none。我简直不敢相信没有任何方法可以使这变得更简单，但我想不出任何方法，如果你有任何简化ifs或VAR的技巧，请随意给他们。谢谢你的关注 let visib1= "#product1#"; let visib2= "#product2#"; let visib3= "

我有很多变量（let），每个变量都连接到一个将被替换的标记，并决定元素是否可见。如果被替换的标记有任何文本，它将是可见的，如果它没有任何文本，它将把元素类更改为具有

display:none。我简直不敢相信没有任何方法可以使这变得更简单，但我想不出任何方法，如果你有任何简化ifs或VAR的技巧，请随意给他们。谢谢你的关注
let visib1= "#product1#";
let visib2= "#product2#";
let visib3= "#product3#";
let visib4= "#product4#";
let visib5= "#product5#";
let visib6= "#product6#";
let visib7= "#product7#";
let visib8= "#product8#";
let visib9= "#product9#";

if(!visib1){
    document.getElementById('product1').classList.add("invisivel");
}

if(!visib2){
    document.getElementById('product2').classList.add("invisivel");
}

if(!visib3){
    document.getElementById('product3').classList.add("invisivel");
}

if(!visib4){
    document.getElementById('product4').classList.add("invisivel");
}

if(!visib5){
    document.getElementById('product5').classList.add("invisivel");
}

if(!visib6){
    document.getElementById('product6').classList.add("invisivel");
}

if(!visib7){
    document.getElementById('product7').classList.add("invisivel");
}

if(!visib8){
    document.getElementById('product8').classList.add("invisivel");
}

if(!visib9){
    document.getElementById('product9').classList.add("invisivel");
}

html部分：
<body>
<div class="text" id="product1">
      <p>new</p>
</div>
<div class="disccount" id="product2">
      <p>disccount</p>
</div>
<div class="text" id="product3">
      <p>new</p>
</div>
<div class="disccount" id="product4">
      <p>disccount</p>
</div>
<div class="text" id="product5">
      <p>new</p>
</div>
<div class="disccount" id="product6">
      <p>disccount</p>
</div>
<div class="text" id="product7">
      <p>new</p>
</div>
<div class="disccount" id="product8">
      <p>disccount</p>
</div>
<div class="text" id="product9">
      <p>new</p>
</div>
</body>


新的
盘数
新的
盘数
新的
盘数
新的
盘数
新的

这是一个html示例
使用数组而不是大量单独的变量
let visib = ["#product1#", "#product2#"];
visib.forEach(v => {
    let m = v.match(/#product(\d+)#/);
    let num = m[1];
    document.getElementById(`product${num}`).classList.add('invisivel');
});

或者简单地说：
for (let i=1;i<10;i++) {
 let d=document.getElementById('product'+i); 
 if (!d.textContent.trim()) d.classList.add('invisivel');
}

for（设i=1；i您可以查询多个选择器，并将类添加到结果元素列表中的每个项目中

const invisible=[“产品-1”、“产品-3”、“产品-5”、“产品-7”、“产品-9]；
document.querySelectorAll（不可见的.join（'，'））
.forEach（el=>el.classList.add（'invisible'）；
不可见{display:none；}
产品1
产品2
产品3
产品4
产品5
产品6
产品7
产品8
产品9
最简单的方法是使用数组、for循环，并根据循环变量构建id/类名。为什么要为变量分配字符串并使用它的boolena值？你知道关于这方面的任何教程吗？这是一个决定这些变量是否可见的系统，系统只能y在这些##之间更改字符串变量请在问题中添加html部分以及它的用例。我觉得这有点难以理解，因为我是JavaScript新手，但它似乎非常有用，谢谢！