Question

我最终要做的是：我正在尝试制作一个按钮（想象它就像下一个按钮），它循环显示9个图像，每个图像都有自己的ID和链接。

问题：每当我调用应该将id切换的函数（例如从youtube转换为imgur）并将显示从none更改为block时，似乎没有任何事情发生。

我尝试了什么：我首先尝试了一个看起来像这样的开关语句（这与所有相关的javascript函数以及html一起）：

注意：我目前只担心下一个按钮的功能。

<body>
<div id="backnext">
    <button class="button2" id="back"> < </button>
    <button class="button2" id="next" onclick="linkSwitch()"> > </button>
    <div id="tablecontainer">
        <ul id="tablelinks">
            <li> <!--Youtube Link-->
                <a id="youtube" href="https://www.youtube.com/"></a>
            </li>
            <li> <!--Imgur Link-->
                <a id="imgur" href="https://imgur.com/"></a>
            </li>
            <li> <!--Facebook Link-->
                <a id="facebook" href="https://www.facebook.com/"></a>
            </li>
            <li> <!--Google Link-->
                <a id="google" href="https://www.google.com/"> </a>
            </li>
            <li> <!--Ion Bank Link-->
                <a id="ionbank" href="https://ionbank.com/"></a>
            </li>
            <li> <!--Paypal Link-->
                <a id="paypal" href="https://www.paypal.com/home"></a>
            </li>
            <li> <!--Aol Link-->
                <a id="aol" href="https://mail.aol.com/webmail-std/en-us/suite"></a>
            </li>
            <li> <!--Amazon Link-->
                <a id="amazon" href="http://www.amazon.com/"></a>
            </li>
            <li> <!--Reddit Link-->
                <a id="reddit" href="https://www.reddit.com/"></a>
            </li>
        </ul>
    </div>      
</div>

<script>
var id, arraynum, x;
id = ["youtube", "imgur", "facebook", "google", "ionbank", "paypal", "aol", "amazon", "reddit"];

    var adder = (function () {
    var arraynum = 0;
    return function() {return arraynum += 1} })();

    function linkSwitch() {
        x = adder();
        x;
        switch (x) {
            case 0:
            document.getElementById("youtube").style.display = block;
            break;
            case 1:
            document.getElementById("imgur").style.display = block;
            break;
            case 2:
            document.getElementById("facebook").style.display = block;
            break;
            case 3:
            document.getElementById("google").style.display = block;
            break;
            case 4:
            document.getElementById("ionbank").style.display = block;
            break;
            case 5:
            document.getElementById("paypal").style.display = block;
            break;
            case 6:
            document.getElementById("aol").style.display = block;
            break;
            case 7:
            document.getElementById("amazon").style.display = block;
            break;
            case 8:
            document.getElementById("reddit").style.display = block;
            break;
        }
    }
</script>
</body>

单击按钮时，计数器的计数器数量为1，每次计数器加1时，linkSwitch（）函数应该检查要使用的ID，所以如果计数器在4上，它会显示离子库图像＆amp;链接。

如果这不起作用，我认为更改id会导致更干净/节省空间的代码有效，但是，它仍然不起作用：

<body>
<div id="backnext">
    <button class="button2" id="back"> < </button>
    <button class="button2" id="next" onclick="linkSwitch()"> > </button>
    <div id="tablecontainer">
        <ul id="tablelinks">
            <li> <!--Youtube Link-->
                <a id="youtube" href="https://www.youtube.com/"></a>
            </li>
            <li> <!--Imgur Link-->
                <a id="imgur" href="https://imgur.com/"></a>
            </li>
            <li> <!--Facebook Link-->
                <a id="facebook" href="https://www.facebook.com/"></a>
            </li>
            <li> <!--Google Link-->
                <a id="google" href="https://www.google.com/"> </a>
            </li>
            <li> <!--Ion Bank Link-->
                <a id="ionbank" href="https://ionbank.com/"></a>
            </li>
            <li> <!--Paypal Link-->
                <a id="paypal" href="https://www.paypal.com/home"></a>
            </li>
            <li> <!--Aol Link-->
                <a id="aol" href="https://mail.aol.com/webmail-std/en-us/suite"></a>
            </li>
            <li> <!--Amazon Link-->
                <a id="amazon" href="http://www.amazon.com/"></a>
            </li>
            <li> <!--Reddit Link-->
                <a id="reddit" href="https://www.reddit.com/"></a>
            </li>
        </ul>
    </div>      
</div>

<script>
var id, arraynum, x;
id = ["youtube", "imgur", "facebook", "google", "ionbank", "paypal", "aol", "amazon", "reddit"];

    var adder = (function () {
        var arraynum = 0;
        return function() {return arraynum += 1} })();

    function linkSwitch() {
        x = id[adder() % 9];
        return document.getElementById(x).style.display = block;
    }
</script>
</body>

我们非常感谢任何关于这可能出错的建议，这里是完整的代码（1个HTML和1个CSS文件）https://gist.github.com/sabs21/ce49655253eab2802beca76c8306a132

在getElementById（）中有变量的麻烦

0 个答案: