Question

这是我的职责。我想从一个div切换到另一个。我正在发生这种情况，但只持续了一秒钟，然后又回到了第一格。

function NextDiv()
    {
        var div = document.querySelectorAll("#div0>div");
        for (var i = 0; i < div.length; i++)
        {
            if (div[i].style.display != "none")
            {
                div[i].style.display = "none";
                if (i == div.length - 1)
                {
                    div[0].style.display = "block";
                }
                else
                {
                    div[i + 1].style.display = "block";
                }
                return false;
            }
        }      
    }

这是一个可测试的小提琴：https://jsfiddle.net/pnumtc35/5/

Answer 1

在您进行div[i+1]的行中，将显示新的div。但是在您的for-loop的下一次迭代中，它将立即再次被隐藏。这就是为什么我添加了break来停止循环的原因。

function NextDiv()
        {
            console.log('click');
            var div = document.querySelectorAll("#div0>div");
            for (var i = 0; i < div.length; i++)
            {
                if (div[i].style.display != "none")
                {
                    div[i].style.display = "none";
                    if (i == div.length - 1)
                    {
                        div[0].style.display = "block";
                    }
                    else
                    {
                        div[i + 1].style.display = "block";
                        break; // ADDED
                    }
                    
                }
            }      
        }

 <div id="div0">
    <div class="column" id="div1" >
        <h2>Customer Information </h2>
        <button runat="server" id="nextbutton" onclick="NextDiv()" >Next </button>
    </div>
    <div class="column" id="div2" style="display: none;">
        <h2>Payment Information</h2>
        <button runat="server" id="Button1" onclick="NextDiv()">Next </button>
    </div>
    <div class="column" id="div3" style="display: none;">
        <h2>Shipment Information</h2>
        <Button ID="btn1" runat="server" Text="Save" onclick="SaveInfo"/>
    </div>   
</div>

html-JavaScript-切换到下一个div时仅显示一秒钟，然后消失

1 个答案: