Javascript span with content，set text()，revert back

Question

我有一个具有如下DIV的span：

<span class="foo">
  <div class="bar">
   Here is my <?php echo $DIV-CONTENT; ?>
  </div>
</span>

现在我设置了可以将我的内容设置为跨度，如下所示：

 $(.span.foo).text("This removed my innerDiv");

现在，我在一些更长的代码中实现了这一点，这些代码的功能与上面的完全相同，但是我无法以某种方式取消设置这个文本和.show()或任何东西()我的< div> back。

我会假设这是可能的，但取消设置，删除，添加属性，但我不能让它工作。

我真的不确定这是否可能，因为你真的需要为此“重置”页面？

Answer 1

你的<div>没有被隐藏，它被完全丢弃了。你正在改写 it。如果您希望保留<div>并将其放回内容中，则需要将其实际存储在一个变量中，以便以后可以手动恢复它。

​

// Store a handle to the div so we can restore it later
var div = $('span.foo div');

$('#clear').click(function () {
  $('span.foo').text("This removed my innerDiv");
});

$('#restore').click(function () {
  $('span.foo').html(div);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="foo">
  <div class="bar">
   Here is my <?php echo $DIV-CONTENT; ?>
  </div>
</span>

<a href="#" id="clear">clear it</a>

<a href="#" id="restore">restore it</a>

​

Answer 2

您可以使用Jquery进行切换：

// jQuery
$(document).ready(function(){ 

//This is your button
$('#altern-panel-hided').toggle( 

    /* 
        first click.
        Function that show a hided panel
        and change the button text.
    */
    function(e){ 
        $('#panel-hided').slideDown();
        $(this).text('hide the panel');
        e.preventDefault();
    }, 

    /* 
        Secund click.
        Function that hide the panel
        and rechange the button text.
    */
    function(e){ 
        $('#panel-oculto').slideUp();
        $(this).text('Show panel');
        e.preventDefault();
    }

);

我希望它能帮助你