难以围绕一个圆圈定位div

时间:2013-12-20 16:40:16

标签: javascript jquery css html

我有几个带有不同类的div并包含几个子div - 每个div代表一个客人在桌子上。每个主要div代表餐馆桌类型。 我准备了jsfiddle

http://jsfiddle.net/rkqBD/

在其中我显示了2种表格类型 - 一种是方形,另一种是圆形。 对于两者,我具有相同数量的具有相同名称的客人,但两者都显示具有相同js代码的不同结果。圆形的人已经安排了div,但是在广场上,一个客人的名字彼此相同。 这是在子表周围对子div进行排序的js代码:

$( 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表现出不同的方式

提前感谢您提供任何帮助或建议。还有别的 - 上面的代码是从网上获取的,我欢迎任何更短的版本..

1 个答案:

答案 0 :(得分:2)

您的方形tbltype设置为0