javascript - div在创建jquery对象中的作用

Question

我正在尝试创建一个圆圈网格，单击时会改变颜色。我目前必须以可视方式创建网格(有效)的代码是这样的:

var color = null;
for (var r = 0; r < 5; r++) { // row
    for (var c = 0; c < 5; c++) { // column
        var myCircle = document.createElement('div');
        myCircle.id = "circle";

        myCircle.style.left = r * 56 + "px";
        myCircle.style.top = c * 56 + "px";

        document.getElementById('grid').appendChild(myCircle); //maybe error
    }
}

我想将其转换为等效的 jquery 来处理单击时状态的变化。这是我到目前为止所得到的: var 颜色 = null;

for (var r = 0; r < 5; r++) { // row
    for (var c = 0; c < 5; c++) { // column

        var $myCircle = $("#circle");
        $myCircle.style.left = r * 56 + "px";
        $myCircle.style.top = c * 56 + "px";
        $(document).ready(function () {
        $($myCircle).click(function() {
         $($myCircle).css('backgroundColor', 'color');
               });
         });
        $('#grid').append($mycircle);
    }
}

知道我哪里出错了吗？我需要在上面代码中的某处引入“div”吗？怎么办？

Answer 1

您正在选择一个元素，而不是在此处创建

$("#circle");

试试这个

   $(document).ready(function () {
     for (var r = 0; r < 5; r++) { // row
      for (var c = 0; c < 5; c++) { // column
         var $myCircle = $("<div />").attr({class:"circle"}).css({left:r * 56 + "px" ,top :c * 56 + "px"}));  //creating a div element with its attributes...
         $('#grid').append($mycircle); //appending it to grid
      }
     }

      $('#grid').on('click','#circle',function() { //using on delegate for dynamically added  div
            $(this).css('backgroundColor', 'color'); 
       });
     });

为了使单击事件适用于动态添加的元素，我们需要将其委托(delegate)给最近的静态父元素。 并且 ID 应该始终是唯一的，因此最好将您的 ID 更改为我在这里所做的类。

已更新

更新了你的 fiddle 中的一些错误，检查一下..

删除 .在我的圈子里

 var $myCircle = $('<div />').addClass('circle').css({
                        //-------------^---removed the `.`..

并将所有 javascript 更改为 jquery..

working fiddle