js很难将div定位在一个圆周围

问题描述

我有几个具有不同类的div，并且包含几个子div-每个子div代表桌子上的一位客人.每个主div代表餐厅表类型.我已经准备好jsfiddle

I have couple of divs with diffrent classes and contain several child divs - each one represents a guest on the table. Each main div represents restaurant table type .I have prepared jsfiddle

http://jsfiddle.net/rkqBD/

在其中显示了2种表格类型-一种是正方形，另一种是圆形.对于这两个我，具有相同名称的来宾数量相同，但是使用相同的js代码都显示出不同的结果.第一圈安排了div的确定，但是在广场上，一位客人的名字彼此重叠.这是对表中的子div进行排序的js代码:

In it I show 2 table types - one is square and the other table type is circle.For both I have the same number of guests with same names but both show different results with same js code. The circle one has arranged divs OK, but on the square one guests names go above each other.This is the js code that order the child divs around the table:

$( document ).ready(function(){
$('.circleBase').each(function(){
var d = $(this).attr("id");
var tbltype = $(this).attr("tbltype");
var elems='';
var x = 0, y = 0, angle = 0;
var rot = 0;
if(tbltype==="1"){
    var elems = document.getElementsByClassName('info_container22 square');
    var totContent = $(this).find(elems).size();
    var increase = Math.PI * 2 / totContent;
    for (var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    x = (115 * Math.cos(angle) + 40);
    y = (95 * Math.sin(angle) + 57);
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    angle += increase;
}
}
if(tbltype==="0"){
    var elems = document.getElementsByClassName('info_container22 circle');
    var totContent = $(this).find(elems).size();
    var increase = Math.PI * 2 / totContent;
    for (var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    x = (115 * Math.cos(angle) + 40);
    y = (95 * Math.sin(angle) + 57);
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    angle += increase;
}
  }
 });
});

请告知代码中有什么问题以及为什么相同的div表现出不同的方式

Please advise what is wrong in the code and why same divs behave diffrent way

在此先感谢您的帮助或建议.还有别的-上面的代码是从网上获取的，我欢迎任何更短的版本..

thank you in advance for any help or suggestions. And something else - the code above was taken from the net and I welcome any shorter version ..

推荐答案

您的方形tbltype设置为0

Your square tbltype is set to 0

这篇关于js很难将div定位在一个圆周围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！