Question

所以我有一些简单的代码。没有什么严重的，或危及生命的。我只是尝试使用JavaScript通过单击创建的最后一个元素来填充带有一些基本100x100元素的空html文件。问题是：我实际上无法让我的代码注册创建的最后一个元素，只注册最后一个初始元素。我能做错什么？

<!DOCTYPE html>
<html>
<head>
    <title>Container Rainbow</title>
    <style type="text/css">
        div{ width:100px;height:100px; }
        #head{ background-color:rgba(100,0,100,.8);}
        #wrapper{width:100%;height:auto;}
        div#wrapper > div{float:left;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var lastDiv;
        var rgba = new Array();
        rgba[0] = 110; rgba[1] = 0; rgba[2] = 110; rgba[3] = 1;
        $(document).ready(function(){
            lastDiv = $("div").last();
            lastDiv.on("click", function(){
            rgba[0] += 5;
            rgba[2] += 5;
            var newDiv = $("<div></div>")
                    .addClass("hatchling")
                    .css("background-color", "rgba("+rgba[0]+",0,"+rgba[2]+",1)")
            $(this).after(newDiv);
            lastDiv=newDiv;
        });
    });
</script>
</head>
<body>
<div id="wrapper">
    <div id="head"></div>
</div>
</body>
</html>

Answer 1

以下是您可以使用的代码，并且jsfiddle演示它是如何工作的http://jsfiddle.net/krasimir/K2dyd/

var lastDiv;
var rgba = new Array();
rgba[0] = 110; rgba[1] = 0; rgba[2] = 110; rgba[3] = 1;

var divClick = function() {
    rgba[0] += 5;
    rgba[2] += 5;
    var newDiv = $("<div></div>")
    .addClass("hatchling")
    .css("background-color", "rgba("+rgba[0]+",0,"+rgba[2]+",1)")
    $(this).after(newDiv);
    lastDiv.off("click");
    lastDiv=newDiv;
    lastDiv.on("click", divClick);
}

lastDiv = $("div").last();
lastDiv.on("click", divClick);

我们的想法是将 onclick 事件附加到最新的div。在您的代码中，您创建div并将其分配给 lastDiv ，但没有附加事件处理程序。

Answer 2

我更愿意尽可能减少对globe变量的依赖。这是另一种答案。

<强> Feddle Demo

JavaScript：

var handleClick     =    function() 
                         {
                             var $this       = $(this);
                             var $newDiv     = $('<div></div>');
                             var rgba        =  $this.css('background-color').match(/\d+/ig);

                             rgba[0] = parseInt(rgba[0], 10) + 5;
                             rgba[2] = parseInt(rgba[2], 10) + 5;

                             $newDiv.addClass("hatchling");
                             $newDiv.css("background-color", "rgba("+rgba[0]+","+rgba[1]+","+rgba[2]+",1)");

                             $(this).after($newDiv);                           
                        };

$("#wrapper").on("click", "div:last", handleClick);

使用JQuery选择最后添加的元素

2 个答案: