Question

<!DOCTYPE html>
<html>
  <head>
    <title>Fact</title>

    <style type="text/css">

    #fact_box {
      height: 200px;
      width: 200px;
      color: blue;
      border-style: dotted;
      position: relative;
    }


    .replace {
      height: 200px;
      width:  200px;
    }

    </style>
    <script type="text/javascript" src="jquery-1.4.js"></script>
    <script type="text/javascript">

$(function () {
    $("#fact_box").click(function () {
        $(this).toggle(function () {
            $(".box_image").fadeOut().replaceWith('<div class="replace">' + "Superman Returns" + '</div>');
        }, function () {
            $(".replace").fadeIn().replaceWith('<img class="box_image" src="http://www.pxleyes.com/images/tutorials/ext//4b757ff47d682.jpg" width="200px" height="200px"/>')
        });
    });
});

    </script>
  </head>

  <body>
  <div id="fact_box">
  <img class="box_image" src="http://www.pxleyes.com/images/tutorials/ext//4b757ff47d682.jpg" width="200px" height="200px"/>
  </div>
  </body>
</html>

嗨，我需要一些帮助来调试JQuery代码。当我点击图像时，我希望它淡出并被div元素替换。当我点击下一个div元素时，我希望它被图像替换。有人能告诉我哪里出错了吗？

Answer 1

您的toggle()方法的链接不正确，以及您同时拥有click()处理程序toggle()的事实 - 请尝试此操作：

$("#fact_box").toggle(
    function() {
        $(".box_image", this).fadeOut(500, function() {
            $(this).replaceWith('<div class="replace">Superman Returns</div>');
        });
    },   
    function() {
        $(".replace", this).fadeOut(500, function() {
            $(this).replaceWith('<div class="box_image"></div>');
        });
    }
);

Example fiddle

Answer 2

你不应该绑定click和toggle，试试这个;

$(function () {
    $("#fact_box").toggle(function () {
          //console.log('even');
            $(".box_image").fadeOut().replaceWith('<div class="replace">' + "Superman Returns" + '</div>');
        }, function () {
          //console.log('odd');
            $(".replace").fadeIn().replaceWith('<img class="box_image" src="http://www.pxleyes.com/images/tutorials/ext//4b757ff47d682.jpg" width="200px" height="200px"/>')
        });
});

在替换元素之前，您应该使用回调函数来完成动画。

同时使用Toggle和FadeIn的问题

2 个答案: