Question

我有一系列我希望输出的状态，这些状态在我的div中列出：

<div>
<div id="startButtonDiv">
    <button id="Start" onclick="verifyAccount();">Start</button>
</div>
<div id="conversationDiv">
    <label>What is your name?</label><input type="text" id="name" />
    <button id="sendName" onclick="sendName();">Send</button>
    <p id="response"></p>
</div>
<div id="verifyAccountDiv">
    <label>Account verified</label>
    <button id="checkBillingButton" onclick="billing();">Check Billing</button>
</div>
<div id="billingDiv">
    <label>Billing checked</label>
    <button id="activationButton" onclick="activation();">Activate Device</button>
</div>
<div id="deviceActivationDiv">
    Device Activated!
</div>

以下是点击调用的函数：

function replaceDiv(oldDiv, newDiv) {
        document.getElementById(oldDiv).innerHTML = document.getElementById(newDiv).innerHTML; 

    }

    function verifyAccount() {
        sleep(500));//simulate authentication
        replaceDiv("startButtonDiv","verifyAccountDiv");
    }

    function billing() {
        sleep(500);//simulate billing
        replaceDiv("verifyAccountDiv", "billingDiv");
    }

    function activation() {
        sleep(500);//simulate device activation
        replaceDiv("billingDiv", "deviceActivationDiv");
    }

但是，我只进入第一个函数调用verifyAccount（）。然后当我点击支票结算按钮时，没有任何反应。是因为div首先被替换了吗？有没有人看到我的问题？

Answer 1

您遇到此问题的原因是您不能替换实际的div。相反，您要替换div的内容。换句话说，当调用第一个函数verifyAccount()时，你可以从这里开始：

<div id="startButtonDiv">
    <button id="Start" onclick="verifyAccount();">Start</button>
</div>

对此：

<div id="startButtonDiv">
    <label>Account verified</label>
    <button id="checkBillingButton" onclick="billing();">Check Billing</button>
</div>

请注意div的ID如何从startButtonDiv更改为verifyAccountDiv。这是因为您不是替换实际的div，而是仅更改内容（这是.innerHTML所做的）。

为了解决这个问题，我建议你改变你的JS功能，即：

function billing() {
    sleep(500);
    replaceDiv("startButtonDiv", "billingDiv");
}

function activation() {
    sleep(500);
    replaceDiv("startButtonDiv", "deviceActivationDiv");
}

您也可以替换div本身，或更改其ID。但是，如果你想回去，你会遇到问题。此外，如果您要使用JS进行大量DOM编辑，我建议您使用库 - 它使您的代码更清晰，更易于理解，更可靠。

Answer 2

如果你被允许使用JQuery，我建议你这样做

工作示例就在这里 http://jsfiddle.net/pvkovalev/UB5Fs/

<div id="startButtonDiv">
    <button id="Start" class="status">Start</button>
</div>
<div id="conversationDiv">
    <label>What is your name?</label>
    <input type="text" id="name" />
    <button id="sendName" class="status">Send</button>
    <p id="response"></p>
</div>
<div id="verifyAccountDiv">
    <label>Account verified</label>
    <button id="checkBillingButton" class="status">Check Billing</button>
</div>
<div id="billingDiv">
    <label>Billing checked</label>
    <button id="activationButton" class="status">Activate Device</button>
</div>
<div id="deviceActivationDiv">Device Activated!</div>

这是JavaScript

$(document).on('click', '.status', function () {
    var id = $(this).attr('id');
    switch (id) {
        case 'sendName':
            verifyAccount();
            break
        case 'checkBillingButton':
            billing();
            break
        case 'activationButton':
            activation();
            break
        default:
            alert('default case!')
    }
});

function replaceDiv(data) {
    var html = $('#' + data).clone().html();
    $('#startButtonDiv').html(html)
}

function verifyAccount() {
    //simulate authentication
    setTimeout(function () {
        replaceDiv("verifyAccountDiv");
    }, 500);
}

function billing() {
    //sleep(500); //simulate billing

    setTimeout(function () {
        replaceDiv("billingDiv");
    }, 500);

}

function activation() {
    //sleep(500); //simulate device activation
    setTimeout(function () {
        replaceDiv("deviceActivationDiv");
    }, 500);

}

代码远非完美，但您可以获得主要方向。祝你好运！

如何传播div链？

2 个答案: