Javascript 通过Raphael.JS元素更新HTML信息

我正在尝试使用Raphael.js和一些HTML标记更新通过单击事件创建的系列或圆圈的信息。创建圆时，生成的html会保留圆的信息及其X、Y和半径的位置，当我移动圆或更改其大小时，可以动态更改这些信息，此JSFIDLE更清楚地显示：

我有我的事件侦听器

    canvasHandler.mouseup(function (e) {

    var mouseX = e.offsetX;
    var mouseY = e.offsetY;
    if (circlePickerSelector) {
        makeCircle(mouseX, mouseY);
        circlePickerSelector = false;
    }       
});

circlePicker.click(function () {
    circlePickerSelector = !circlePickerSelector;

});

这是在第一个eventListener中调用的主函数。它创建了圆和该圆的HTML元素

function makeCircle(mouseX, mouseY) {
    //We call it before our circles are dragged so that their array is waiting to store the information
    // addingArrays(circleCounter);
    var radius;
    var fill;
    var circle = canvas.circle(mouseX, mouseY, 50).attr({
        fill: "hsb(.8, 1, 1)",
        stroke: "none",
        opacity: .5,
    });
    // console.log(circles);
    // We add an ID and a class to the circle
    var ourCircle = $("circle").last();
    ourCircle.attr("class", circleCounter);
    // And then finally push it to our array of circles
    circles.push(circle);
    var handlerPos = [mouseX + 35, mouseY + 35];
    var s = canvas.circle(handlerPos[0], handlerPos[1], 10).attr({
        fill: "hsb(.8, .5, .5)",
        stroke: "none",
        opacity: .5
    });
    //We add an id and a class to our little circle.
    s.node.id = sizerCounter;
    var sizerClass = $('circle').last();
    sizerClass.attr("class", "main-circle sizer");
    var newSizerClass = $(".sizer");
    // console.log(s);
    s.hide();
    //We now assign a handler for each little circle added and a main circle in order to hide them
    var circleClass = $("." + String(circleCounter));
    var sizerID = $("#" + String(sizerCounter));
    circleClass.mouseenter(function () {
        sizerID.toggle();
    });
    circleClass.mouseleave(function () {
        sizerID.hide();
    });
    sizerID.mouseenter(function () {
        $(this).toggle();
    });
    sizerID.mouseleave(function () {
        $(this).hide();
    });
    // console.log(circleClass);
    //We add some resizing and dragging properties
    var start = function () {
        //storing original coordinates
        this.ox = this.attr("cx");
        this.oy = this.attr("cy");
        this.sizer.ox = this.sizer.attr("cx");
        this.sizer.oy = this.sizer.attr("cy")
        this.attr({
            opacity: 1
        });
        this.sizer.attr({
            opacity: 1
        });
    }, move = function (dx, dy) {
            // move will be called with dx and dy
            this.attr({
                cx: this.ox + dx,
                cy: this.oy + dy
            });
            this.sizer.attr({
                cx: this.sizer.ox + dx,
                cy: this.sizer.oy + dy
            });
            //This is the key function to change 
            updateModel(this.attrs.cx, this.attrs.cy, this.node.className.baseVal, this.attrs.r);
        }, up = function () {
            // restoring state
            this.attr({
                opacity: .5
            });
            this.sizer.attr({
                opacity: .5
            });
        }, rstart = function () {
            // storing original coordinates
            this.ox = this.attr("cx");
            this.oy = this.attr("cy");
            this.big.or = this.big.attr("r");
        }, rmove = function (dx, dy) {
            // move will be called with dx and dy
            this.attr({
                cx: this.ox + dy,
                cy: this.oy + dy
            });
            this.big.attr({
                r: this.big.or + (dy < 0 ? -1 : 1) * Math.sqrt(2 * dy * dy)
            });
            updateModel(this.attrs.cx, this.attrs.cy, this.node.className.baseVal, this.attrs.r);
        };
    circle.drag(move, start, up);
    circle.sizer = s;
    s.drag(rmove, rstart);
    s.big = circle;
    //Here we create
    var myCodeList = $(".code-list");
    var htmlString = "<li class='" + circleCounter + "'> <span class='circle-color'> var color = <div class='circle-color-input' contentEditable autocorrect='off'> type a color</div> ; </span> <br> <span class='circle-radius'> This is a test </span> <br> <span class='circle'> This is a test </span> </li>";
    myCodeList.append(htmlString);
    updateList();
    circleCounter++;
    sizerCounter++;     
}

函数makeCircle（mouseX，mouseY）{
//我们在拖动圆之前调用它，以便它们的数组等待存储信息
//添加阵列（循环计数器）；
变异半径；
变量填充；
var circle=canvas.circle（mouseX，mouseY，50）.attr({
填写：“hsb（.8,1,1）”，
笔画：“无”，
不透明度：.5，
});
//console.log（圆形）；
//我们向圆中添加一个ID和一个类
var ourCircle=$（“circle”）.last（）；
ourCircle.attr（“类”，circleCounter）；
//然后最后把它推到我们的圆圈阵列上
圆。推（圆）；
var handlerPos=[mouseX+35，mouseY+35]；
var s=canvas.circle（handlerPos[0]，handlerPos[1]，10）.attr({
填写：“hsb（.8、.5、.5）”，
笔画：“无”，
不透明度：.5
});
//我们在小圆圈中添加了一个id和一个类。
s、 node.id=sizerCounter；
var sizerClass=$（'circle'）.last（）；
sizerClass.attr（“类”，“主圆尺寸器”）；
var newSizerClass=$（“.sizer”）；
//控制台日志；
s、 隐藏（）；
//现在，我们为每个添加的小圆指定一个处理程序，并为其指定一个主圆以隐藏它们
var circleClass=$（“+”字符串（circleCounter））；
var sizerID=$（“#”+字符串（sizerCounter））；
circleClass.mouseenter（函数（）{
sizerID.toggle（）；
});
circleClass.mouseleave（函数（）{
sizerID.hide（）；
});
sizerID.mouseenter（函数（）{
$（this.toggle（）；
});
sizerID.mouseleave（函数（）{
$（this.hide（）；
});
//控制台日志（circleClass）；
//我们添加了一些调整大小和拖动属性
var start=函数（）{
//存储原始坐标
this.ox=this.attr（“cx”）；
this.oy=this.attr（“cy”）；
this.sizer.ox=this.sizer.attr（“cx”）；
this.sizer.oy=this.sizer.attr（“cy”）
这个是.attr({
不透明度：1
});
this.sizer.attr({
不透明度：1
});
}，move=函数（dx，dy）{
//将使用dx和dy调用move
这个是.attr({
cx:this.ox+dx，
西：这个
});
this.sizer.attr({
cx:this.sizer.ox+dx，
赛斯：这个。赛斯
});
//这是改变的关键功能
updateModel（this.attrs.cx、this.attrs.cy、this.node.className.baseVal、this.attrs.r）；
}，up=函数（）{
//恢复状态
这个是.attr({
不透明度：.5
});
this.sizer.attr({
不透明度：.5
});
}，rstart=函数（）{
//存储原始坐标
this.ox=this.attr（“cx”）；
this.oy=this.attr（“cy”）；
this.big.or=this.big.attr（“r”）；
}，rmove=函数（dx，dy）{
//将使用dx和dy调用move
这个是.attr({
cx:this.ox+dy，
西：这个
});
这个，大的({
r:this.big.or+（dy<0？-1:1）*Math.sqrt（2*dy*dy）
});
updateModel（this.attrs.cx、this.attrs.cy、this.node.className.baseVal、this.attrs.r）；
};
圆。拖动（移动、启动、向上）；
circle.sizer=s；
s、 拖动（rmove，rstart）；
s、 大=圆；
//我们在这里创建
var myCodeList=$（“.code list”）；
var htmlString=“
var color=type a color；
这是一个测试
这是一个测试
”；
mycdelist.append（htmlString）；
updateList（）；
循环计数器++；
sizerCounter++；
}

最后，这两个函数允许更新html和圆的位置：

function updateModel(x, y, _class, r) {
    var len = circles.length;
    for (var i = 0; i < len; i++) {
        if (circles[i].node.className.baseVal == _class) {
            circles[i].attrs.cx = x;
            circles[i].attrs.cy = y;
            circles[i].attrs.r = r;
        }
    }
    updateList();

}

function updateList() {
    //To change that one I have put a class or an id
    var listItems = $('.code-list').find('li.' + circleCounter);
    // console.log(listItems);
    var len = circles.length;
    for (var i = 0; i < circles.length; i++) {
        //We create one reference. This makes looking for one element more effective. Unless we need to search for a particular element
        var currentItem = circles[i];
        var updateStringRadius = "var radius = " + parseInt(currentItem.attrs.r) + ";";
        var updateStringCircle = "circle (" + currentItem.attrs.cx + " ," + currentItem.attrs.cy + ", radius)";
        //This is the div Item for the particular div of each element
        var divItem = $(listItems[i]);
        var radiusItem = divItem.find("span.circle-radius");
        var circleItem = divItem.find("span.circle");
        // console.log(currentItem.attrs.cx);
        radiusItem.text(updateStringRadius);
        console.log($('.circle-radius').html());
        circleItem.text(updateStringCircle);
        // divItem.text(updateString);
        // console.log(divItem);
    }
}

函数更新模型（x，y，_类，r）{
var len=圆。长度；
对于（变量i=0；i

如果您看一看JSFIDLE并创建三个圆，例如。它只会在创建圆后更新第一个圆的信息，但现在当m

function updateList() {
//To change that one I have put a class or an id
var listItems = $('.code-list').find('li.' + circleCounter);
// console.log(listItems);
var len = circles.length;
for (var i = 0; i < circles.length; i++) {
    //We create one reference. This makes looking for one element more effective. Unless we need to search for a particular element
    var currentItem = circles[i];
    var updateStringRadius = "var radius = " + parseInt(currentItem.attrs.r) + ";";
    var updateStringCircle = "circle (" + currentItem.attrs.cx + " ," + currentItem.attrs.cy + ", radius)";
    //This is the div Item for the particular div of each element
    var divItem = $(listItems[i]);
    var radiusItem = divItem.find("span.circle-radius");
    var circleItem = divItem.find("span.circle");
    // console.log(currentItem.attrs.cx);
    radiusItem.text(updateStringRadius);
    console.log($('.circle-radius').html());
    circleItem.text(updateStringCircle);
    // divItem.text(updateString);
    // console.log(divItem);
}

function updateList(){     
 var len = circles.length;
 for (var i = 0; i < circles.length; i++) {
  var currentItem = circles[i];
  var updateStringRadius = "var radius = " + parseInt(currentItem.attrs.r) + ";";
  var updateStringCircle = "circle (" + currentItem.attrs.cx + " ," + currentItem.attrs.cy + ", radius)";
  var divItem = $('.code-list').find('li.circle-' + (i+1))
  var radiusItem = divItem.find("span.circle-radius");
  var circleItem = divItem.find("span.circle");
  radiusItem.text(updateStringRadius);
  circleItem.text(updateStringCircle);
}