1

我已经学习 javaScript 两个星期了，我知道必须有更好的方法来做下面显示的事情。

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

//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";
    }
}
4

2 回答 2

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";
    }
}
于 2013-06-12T16:58:12.500 回答
0

像这样的东西应该工作：

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。在这种情况下，它会显示元素。否则它会隐藏它。

于 2013-06-12T16:57:23.457 回答