0

だから私は簡単なコードを持っています。重大な、または生命を脅かすものは何もありません。JavaScript を使用して、作成された最後の要素をクリックして、空の html ファイルにいくつかの基本的な 100x100 要素を入力しようとしています。問題は、実際に作成された最後の要素を登録するコードを取得できず、最後の初期要素のみを登録できないことです。私は何が間違っているのでしょうか？

<!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

可能であれば、グローブ変数への依存を減らすことを好みます。これが別の答えです。

フェドルのデモ

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 に答える