如何使这个 JS 函数更短？答案

【问题标题】：How can I make this JS function shorter?如何使这个 JS 函数更短？
【发布时间】：2021-12-27 22:11:01
【问题描述】：

我目前正在使用此脚本通过 ID 号隐藏元素：

function items() {

var div = document.getElementById('QTDItems');
var itensQtd = div.textContent;

if (itensQtd == 1) {
    for(var i=2; i<=20; i++){
        var element = document.getElementById("item"+i);
            element.style.display = 'none';
    }
} 

else if (itensQtd == 2) {
    for(var i=3; i<=20; i++){
        var element = document.getElementById("item"+i);
            element.style.display = 'none';
    }
} 
// And so on until the else if (itensQtd == 18)

我正在使用itensQtd = div.textContent，因为我正在将 PHP 变量转换为 html，如下所示：

<div id="QTDItems" style="display: block;">
    <?php echo block_field('exame-qtd'); ?>
</div>

但是对于 20 个 div 中的每一个，我都必须创建一个 IF 来选择将隐藏哪些 ID 号。我还不太擅长 JavaScript，所以我不知道如何让它更短更智能。有人可以帮忙吗？

【问题讨论】：

for (var i = itensQtd + 1; i <= 20; i++) { ??
var startIndex = parseInt(itensQtd) + 1; 应该让你上路
为什么不从隐藏所有项目开始呢？
Number(itensQtd) + 1.

标签： javascript if-statement

【解决方案1】：

试试这样的：

function HideItems(itensQtd){
    for(var i=itensQtd+1; i<=20; i++){
        var element = document.getElementById("item"+i);
            element.style.display = 'none';
    }
}

或者你可以使用箭头函数：

HideItems = (itensQtd) => {
    for(var i=itensQtd+1; i<=20; i++){
        var element = document.getElementById("item"+i);
            element.style.display = 'none';
    }
}

注意：最好将条件"i<=20"中的数字替换为找到的div总数。

然后你这样称呼它。无需调用 if 条件：

var div = document.getElementById('QTDItems');
var itensQtd = div.textContent;
HideItems(itensQtd);

【讨论】：

【解决方案2】：

好吧，这里有很多问题。您绝对应该查看 Youtube 或其他资源（如 W3Schools）上的 JavaScript 教程。首先，你应该使用 let/const 而不是 var。所以每当你想创建一个变量时，你可以使用let，像这样：

let itensQtd = div.textContent;

或者这个：

for(let i = 0; i < n; i++)

您还需要正确解析文本内容并确保它是一个数字。

const goalID = parseInt(div.textContent);

当涉及到您的问题时，您可以创建一个循环来迭代每个元素并将它们设置为 none，除非它是您要显示的元素。

for(let i = 1; i <= 20; i++) {
   const element = document.getElementById(`item ${i}`);
   if(i === goalID) element.style.display = 'block'; // not sure how you want to display the one that you don't want to hide.
   else element.style.display = 'none';
}

总的来说，这将解决上述问题，但您绝对应该尝试做一个现代 JavaScript 教程来学习基础知识。不确定你更大的项目是什么，但如果你需要通过解析另一个元素的文本内容来找到要隐藏/显示的元素，那么肯定会出现问题。

【讨论】：