0

クリック時にjQueryの「replaceWith」関数をアクティブにしてdiv1をdiv2に置き換え、次に「replaceWith」を再度使用してクリック時にdiv2をdiv1に置き換えようとしています。

div2をクリックしても、div1が再表示されないことを除いて、すべてが機能しています。

私のコードは：

$(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はここにあります：

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

私の質問は以下のリンクで答えられたと確信していますが、それを私の正確なコードに適用する方法がわかりません。

replaceWith後にイベントが登録されない

ありがとうございました。

4

1 に答える 1

3

replaceWithの代わりに、 show（）と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();
     });
   });

デモ

于 2012-10-25T08:53:39.843 に答える