Question

我试图使用for循环使用jQuery从一个对象生成10个同心圆。

我在我的jsfiddle http://jsfiddle.net/JoshuaWaheed/NJkda/2/中写了这个，看起来像这样：

<div class="circle"></div>

for(var count = 0; count < 20; count++){
  var ten = 10;
  ten = ten + 30;
  $(".circle").css({"width":ten+"px","height":ten+"px"});
};

我怎样才能做到这一点？当我使用任何数字（例如30）添加变量时，它似乎会增加宽度和高度，但不会显示它应该的结果。

Answer 1

您需要在循环外定义ten变量，并为每个环创建一个新元素。

例如，

var ten = 10;
var tgt = $('body');
for(var count = 0; count < 20; count++){
    ten += 30;
    tgt.append('<div class="circle" style="width:'+ten+'px;height:'+ten+'px;margin:-'+(ten/2)+'px 0 0 -'+(ten/2)+'px"></div>');
};

请注意，我还在javascript中定义了边距，因为它还需要更改。

你的CSS也需要一点点改变;

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 3px solid #666666;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

我已将边框半径设置为100％而不是像素值，并删除了边距和宽度/高度，这是不必要的。

Answer 2

首先，将变量声明移到循环外部。其次，将border-radius值设置为50％。最后，为每个圆创建一个新元素。您的代码重新访问：

/** 
 * css radius:
 *  -webkit-border-radius: 50%;
 *  -moz-border-radius: 50%;
 *  border-radius: 50%;
 */
var ten = 10;
for(var count = 0; count < 20; count++){
   ten = ten + 10;
   var c = $('<div class="circle"></div>').appendTo('body');
   c.css({"width":ten+"px","height":ten+"px"});
};

修改后的jsFiddle

Answer 3

首先，您要为每个循环重复修改一个现有的圆圈。

其次，每次迭代都要将高度和宽度设置为40px。

第三，你可能想要使用SVG图形，它为这样的东西提供原生支持。以下是SVG的示例：

<强> http://jsfiddle.net/5c6zy/1/

//HTML
<svg id='circles' xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>

//Javascript
var centerX = 250;
var centerY = 250;

for(var count = 0; count < 20; count++){
    var radius = count * 10;
    makeAndPlaceCircle(radius);
};

function makeAndPlaceCircle(r){
  // thx m93a: http://stackoverflow.com/a/16489845/1380669
  var circles = document.getElementById('circles'); //Get svg element
  var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); 
  newElement.setAttribute("cx", centerX);
  newElement.setAttribute("cy", centerY);
  newElement.setAttribute("r", r);
  newElement.style.stroke = "#000"; //Set stroke colour
  newElement.style.strokeWidth = "2px"; //Set stroke width
  newElement.style.fill = "none"; //Set stroke colour
  circles.appendChild(newElement);
};

//No CSS required, but you can define CSS classes and set them on the SVG circle elements, if you would like to e.g. change stroke, fill

Answer 4

我的例子很有趣http://jsfiddle.net/gxM84/2/

var n=5; //set number of circles

这里增加半径

padding: 15px;

使用JavaScript / jQuery创建同心圆

4 个答案: