2

我有这个网站（全屏查看）。

目标：

点击"#cos_next"：

  1. 图像"#img_1"应该移到页面之外的左侧，并且"#img_2"应该从右侧进入。
  2. 该图像应该被删除"cos_next"。"cos_grey_back"
  3. 形象"cos_pre"，"cos_grey__next"应该取代他们的位置。

你明白我想要做什么。然而，

问题：

在"img_1"移开并"img_2"进来之后，但单击图像"cos_pre"不会做任何事情。

参考代码：

里面的代码<script>：

$(window).load(
                $("html , a").on("mousedown mouseup", function (e) {
                     e.preventDefault();
                     $("html , a").toggleClass("change");
                }
        ));

        //Slide in three monsters 
        $(document).ready(function () {
            $('#cos_next').click(function () {
                $('#img_1').animate({
                    left: "-=1093px"
                }, 1000);
                $('#img_2').animate({
                    left:"-=1170px"
                }, 1000);
                $("#cos_next").fadeOut("slow").remove();
                $("#cos_grey_back").fadeOut("slow").remove();
                $("body").append("<img src='costume-previous-button.PNG' id='cos_pre' />");
                $("body").append("<img src='costume-grey-next-button.png' id='cos_grey_next' />");
            });
        });

        // Slide back in the team
        $(document).ready(function () {
            $('#cos_pre').click(function () {
                $("#img_2").animate({
                    left:"+=1093px"
                }, 1000);
                $("#img_1").animate({
                    left:"+=1170px"
                }, 1000);
            });
        });

里面的代码<style>：

html, a {
            cursor:url(cursor.png) 6 3 , default;
            overflow:hidden;
        }
        .change {
            cursor:url("cursor-clicked.png") 6 3 , default;
        }
        body { 
                background: url('costume-page.png') no-repeat center center fixed;    
                background-size:cover;  /*For covering full page*/
        }
        #cos_back{
            position:absolute;
            bottom:0.45%;
            left:0.10%;
            transition:0.5s ease;
        }
        #cos_back:hover , #cos_next:hover , #cos_pre:hover {
            -webkit-transform:scale(1.10);
            -moz-transform:scale(1.10);
            -ms-transform:scale(1.10);
            -o-transform:scale(1.10);
        }
        #cos_next {
            position:absolute;
            bottom:0.45%;
            left:51.60%;
            transition:0.5s ease;
        }
        #img_1{
            position:absolute;
            left:230px;
            top:0.3%;
        }
        #img_2 {
            position:absolute;
            left:1400px;
            top:0.3%;
        }
        #cos_pre {
            position:absolute;
            bottom:0.40%;
            left:41.00%;
            transition:0.5s ease;
        }
        #cos_grey_next {
            position:absolute;
            bottom:0.45%;
            left:51.60%;
            transition:0.5s ease;
        }
        #cos_grey_back {
            position:absolute;
            bottom:0.40%;
            left:41.00%;
            transition:0.5s ease;
        }

主 HTML 文件：

<!--Loaded from the costume button on start-menu.html . Press the back button to go back-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angry Birds Star Wars</title>
    <script src = "JQuery.js"></script>
    <script src = "JQueryUI.js"></script>
    <style>..........</style>
    <script>..........</script>
</head>
<body>
    <img src = "costume-page-new-1.png" id="img_1" />
    <img src="costume-page-new-2.PNG" id="img_2" />
    <img src="costume-back-button.PNG" id="cos_back" onclick="window.location.href='start-menu.html';"/>
    <img src="costume-grey-back-button.png" id="cos_grey_back" />
    <img src="costume-next-button.PNG" id="cos_next" />
</body>
</html>

请帮忙。我希望我提供了所有必要的信息。

谢谢。

4

1 回答 1

1

似乎您的#cos_pre元素是动态附加的，所以这样做：

$('#cos_pre').click(function () {
...

不起作用，请尝试使用jQuery.on()，例如

$(document).on("click", "#cos_pre", function() {
..your code here

而且您不需要(document).ready(function(){ ..为每个代码单独添加，将所有代码添加到单个ready()函数中

于 2013-09-23T10:25:59.540 回答