0

所以我有一个简单的代码。没有什么严重的，或危及生命的。我只是想通过单击创建的最后一个元素来使用 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>
4

2 回答 2

2

这是您可以使用的代码和 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，但没有附加事件处理程序。

于 2013-09-14T22:04:54.327 回答
0

我更愿意尽可能减少对全球变量的依赖。这是一个替代答案。

Feddle 演示

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);
于 2013-09-15T00:20:47.067 回答