如何在文档中两次使用jquery'replaceWith'?

问题描述

我试图在单击时激活jQuery'replaceWith'函数以将div1替换为div2，然后再次使用'replaceWith'在单击时将div2替换为div1.

i am trying to activate a jQuery 'replaceWith' function on click to replace div1 with div2 and then use 'replaceWith' again to replace div2 with div1 on click.

一切正常，除了单击div2时，div1不会重新出现.

everything is working except, when clicking on div2, div1 does not re-appear.

我的代码是:

$(document).ready(function(){
$("#open_doors").click(function(){
$("#leftdoor_inner").animate({"left": "-=164px"}, 'slow');
$("#leftdoor_outer").animate({"left": "-=74px"},'slow');
$("#rightdoor_inner").animate({"left": "+=164px"},'slow');
$("#rightdoor_outer").animate({"left": "+=74px"},'slow');
$("#open_doors").replaceWith($("#close_doors"));
});
$("#close_doors").click(function(){
$("#leftdoor_inner").animate({"left": "+=164px"},'slow');
$("#leftdoor_outer").animate({"left": "+=74px"},'slow');
$("#rightdoor_inner").animate({"left": "-=164px"},'slow');
$("#rightdoor_outer").animate({"left": "-=74px"},'slow');
$("#close_doors").replaceWith($("#open_doors"));
});
});​

几乎可以使用的jsfiddle在这里:

the nearly working jsfiddle is here:

http://jsfiddle.net/9zsdN/2/

我很确定我的问题在下面的链接中得到了回答，但是我不知道如何将其应用于我的确切代码.

i'm pretty sure my question has been answered at the link below but i can't figure out how to apply it to my exact code.

replaceWith之后未注册的事件

谢谢.

推荐答案

而不是replaceWith您可以使用 show( )和 hide()

instead of replaceWith you can just use show() and hide()

 $(document).ready(function(){
      $("#open_doors").click(function(){
        $("#leftdoor_inner").animate({"left": "-=164px"}, 'slow');
        $("#leftdoor_outer").animate({"left": "-=74px"},'slow');
        $("#rightdoor_inner").animate({"left": "+=164px"},'slow');
        $("#rightdoor_outer").animate({"left": "+=74px"},'slow');
        $("#open_doors").hide();
        $("#close_doors").show();
      });
     $("#close_doors").click(function(){
         $("#leftdoor_inner").animate({"left": "+=164px"},'slow');
         $("#leftdoor_outer").animate({"left": "+=74px"},'slow');
         $("#rightdoor_inner").animate({"left": "-=164px"},'slow');
         $("#rightdoor_outer").animate({"left": "-=74px"},'slow');
         $("#close_doors").hide();
         $("#open_doors").show();
     });
   });

演示

这篇关于如何在文档中两次使用jquery'replaceWith'?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！