0

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

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”？如何？

4

3 回答 3

2

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

$("#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 更改为我在这里所做的类。

更新

更新了您小提琴中的一些错误，请查看..

去除 。在我的圈子里

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

并将您所有的javascript更改为jquery ..

工作小提琴

于 2013-04-11T05:15:21.043 回答
0

当您像这样进行一堆附加操作时，使用文档片段会更好。代码如下所示：

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

但我建议使用 inline-block 方法来布局你的圈子。指南针混音对此非常方便。此外，边界半径指南针混合。这样，您的代码将简化为：

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 。

这是支持的 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;
}

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

于 2013-04-11T05:36:29.713 回答
0 
var $myCircle = $("#circle");

应该：

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

因为您使用 DOM 原生函数，但它是一个 jQuery 包装器。

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

于 2013-04-11T05:13:51.423 回答