Question

我已经研究了javaScript两周了，我知道必须有更好的方法来做下面显示的内容。

这是发生的事情：
函数myId()调用另一个函数并接收一个参数，该参数可以是mk-prod06，mk-prod05，mk-prod04，mk-prod03。但我想知道我是否可以通过接受任何参数（mk-prod0x）来使这个功能更灵活，其中x可以是任何数字。我不想“为它”写出每一个“if”。在这种情况下，这甚至可能吗？谢谢。

//Hides and shows product boxes

function myId() {
    adjustStyle();
    var showProduct6, showProduct5, showProduct4, showProduct3, hideProduct6, hideProduct5, hideProduct4, hideProduct3;
    if (oProdId === "mk-prod06") {
        showProduct6 = document.getElementById("mk-prod06");
        showProduct5 = document.getElementById("mk-prod05");
        showProduct4 = document.getElementById("mk-prod04");
        showProduct3 = document.getElementById("mk-prod03");
        showProduct6.style.display = "inline";
        showProduct5.style.display = "inline";
        showProduct4.style.display = "inline";
        showProduct3.style.display = "inline";
    }
    if (oProdId === "mk-prod05") {
        hideProduct6 = document.getElementById("mk-prod06");
        hideProduct6.style.display = "none";
        showProduct5 = document.getElementById("mk-prod05");
        showProduct4 = document.getElementById("mk-prod04");
        showProduct3 = document.getElementById("mk-prod03");
        showProduct5.style.display = "inline";
        showProduct4.style.display = "inline";
        showProduct3.style.display = "inline";
    }
    if (oProdId === "mk-prod04") {
        hideProduct6 = document.getElementById("mk-prod06");
        hideProduct5 = document.getElementById("mk-prod05");
        hideProduct6.style.display = "none";
        hideProduct5.style.display = "none";
        showProduct4 = document.getElementById("mk-prod04");
        showProduct3 = document.getElementById("mk-prod03");
        showProduct4.style.display = "inline";
        showProduct3.style.display = "inline";
    }
    if (oProdId === "mk-prod03") {
        hideProduct6 = document.getElementById("mk-prod06");
        hideProduct5 = document.getElementById("mk-prod05");
        hideProduct4 = document.getElementById("mk-prod04");
        hideProduct6.style.display = "none";
        hideProduct5.style.display = "none";
        hideProduct4.style.display = "none";
        showProduct3 = document.getElementById("mk-prod03");
        showProduct3.style.display = "inline";
    }
    if (oProdId === "mk-prod02") {
        hideProduct6 = document.getElementById("mk-prod06");
        hideProduct5 = document.getElementById("mk-prod05");
        hideProduct4 = document.getElementById("mk-prod04");
        hideProduct3 = document.getElementById("mk-prod03");
        hideProduct6.style.display = "none";
        hideProduct5.style.display = "none";
        hideProduct4.style.display = "none";
        hideProduct3.style.display = "none";
    }
}

Answer 1

好吧，你基本上写了一个循环。明确地制定这个循环是非常简单的：

function myId() {
    adjustStyle();
    var x = // the number, wherever you got it from. Maybe:
            // parseInt(oProdId.slice(7), 10)
    for (var i=6; i>2; i--) {
        var product = document.getElementById("mk-prod"+("0"+i).slice(-2));
        product.style.display = i > x ? "none" : "inline";
    }
}

Answer 2

这样的事情应该有效：

function hideShow(id) {
    var upTo = id.match(/md-prod0(\d)/)[1];

    for (var i = 3; i < 6; i++) {
        var element = document.getElementById('md-prod0' + i); 
        if (i <= upTo) element.style.display = 'inline';
        else element.style.display = 'none';
    }
}

如果要添加更多元素，则必须稍微调整一下。

基本上它遍历3到6并检查当前元素是否小于或等于给定ID。在那种情况下，它显示了元素。否则它会隐藏它。

简化IF语句

2 个答案: