div在创建jquery对象中的作用答案

【问题标题】：the role of div in creating jquery objectsdiv在创建jquery对象中的作用
【发布时间】：2013-04-03 04:47:52
【问题描述】：

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

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”？怎么样？

【问题讨论】：

标签： javascript jquery object html append

【解决方案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'); 
       });
     });

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

更新

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

删除 .在我的圈子里

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

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

working fiddle

【讨论】：

一个页面上不能有多个具有相同 ID 的元素 :)
嗨！我尝试使用它，但它没有用。我不确定错误是什么。我已将我的圈子从 ID 更改为班级。有什么建议吗？
这是我的圆形 css 代码：.circle { width:50px;高度：50 像素；边界半径：50%；边框样式：实心；边框颜色：#FAEBD7；位置：绝对；背景颜色：#c0c0c0； }
我没有在我的 CSS 中创建一个 div。我需要这样做吗？

【解决方案2】：

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

应该是：

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

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

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

【讨论】：

另外，您可以展示 OP 如何实际使用更方便的 jQuery 收集方法。

【解决方案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; }

【讨论】：