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 color = 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'); 
       });
     });

要使click事件适用于动态添加的元素，我们需要将其委托给最近的静态父元素。 和ID应始终是唯一的，因此最好将您的ID更改为我在此处所做的课程。

<强>更新

更新了你的小提琴中的一些错误检查出来..

删除。在mycircle

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

并将你所有的javascript改为jquery ..

working fiddle

Answer 2

var $myCircle = $("#circle");

应该是：

var myCircle = $("#circle")[0];

因为你使用DOM本机函数，但它是一个jQuery包装器。

请注意，我从$删除了myCircle前缀，因为现在它是一个DOM元素。

Answer 3

当你做这样的一系列追加时，使用document fragment会更好。代码如下所示：

var frag = document.createDocumentFragment();
for (var r = 0; r < 5; r++) { // row
    for (var c = 0; c < 5; c++) { // column
        var $circle = $('<div/>').addClass('circle').css({left: r*56, top: c*56});
        frag.appendChild($circle.get(0));
    }
}
$('#grid').append(frag).on('click', '.circle', function(){
    $(this).css('backgroundColor', 'red');
});

但我建议采用内联块方法来布置你的圈子。 Compass mix-in对此非常方便。另外，border-radius Compass mix-in。这样，您的代码将减少为：

var frag = document.createDocumentFragment();
for (var i = 0; i < 25; i++)
    frag.appendChild($('<div/>').addClass('circle').get(0));

$('#grid').append(frag).on('click', '.circle', function(){
    $(this).css('backgroundColor', 'red');
});

此外，您不需要在jQuery css道具上指定+'px'。不要忘记/中>之前的$('<div/>')。我用最后的解决方案创建了jsFiddle here。

这是支持SCSS：

$radius: 50px;
$gap: 6px;

#grid {
    width: ($radius + $gap) * 5;
}

.circle {
    display: inline-block;
    float: left;
    border-radius: $radius;
    width: $radius;
    height: $radius;
    border: $gap/2 solid white;
    background-color: yellowgreen;
}

更好的是，点击执行toggleClass('active')并设置CSS .active {color: red; }

div在创建jquery对象中的作用

3 个答案: