Question

使用jQuery html函数动态交换BODY内容与“静态”内容一样正常工作。

但是如果使用表格，输入的当前状态就会丢失。

应该保持页面状态的jQuery分离函数似乎在整个页面中消隐。

以下代码是使用jQuery html的初步想法，但当然文本输入值将始终为空。

  function swap1( ) {

    $("body").html('<button onclick="swap2();">SWAP2</button><input type="text" placeholder="swap2"/>');

  }

  function swap2( ) {

    $("body").html('<button onclick="swap1();">SWAP1</button><input type="text" placeholder="swap1"/>');


  }

由于不知道输入的形式是什么，如何在BODY中交换这些形式并跟踪形式状态？

演示两个文本输入，当它们回到BODY时应保持状态：

https://jsfiddle.net/g7hksfne/3/

Answer 1

编辑：误解了用例。这包括在操作DOM时保存状态，而不是在不同状态之间切换。

不要通过序列化和解析HTML来替换<body>的内容，而是学习如何使用DOM。只替换实际更改的DOM部分，以便其余部分保持其状态（存储在DOM中）。

在你的情况下：你可能想要使用这样的东西：

function swap1( ) { document.querySelector("button").onclick = swap2; document.querySelector("button").textContent = "SWAP2"; document.querySelector("input").placeholder = "swap2"; } function swap2( ) { document.querySelector("button").onclick = swap1; document.querySelector("button").textContent = "SWAP1"; document.querySelector("input").placeholder = "swap1"; }

<button onclick="swap1();">SWAP1</button><input type="text" placeholder="swap1"/>

（这不是优化的，只应作为一个例子。）

Answer 2

如果您还没有容器，请将要保存的内容放在=IIf(Fields!Finance.Value)="Collected", FALSE,TRUE)下方的节点中，就像一个简单的'。如果要保存和替换容器，请使用以下内容：

<body>

该元素现已分离，您可以将辅助内容添加到var saved_container = document.body.removeChild(document.querySelector("#app_container"); // or document.getElementById/getElementsByClassName, depends on container。当您想要返回时，保存辅助内容（当然不会覆盖第一个容器），然后重新附加主要内容：

document.body

在保持状态的同时交换BODY内容

2 个答案: