Javascript KineticJS在事件上设置变量值

我在一个对象中定义了几个kineticJS圆，并创建和显示了其中的几个对象。我想要的是根据用户从显示的圆圈中选择的对象生成一个XML对象

为此，我尝试设置一个变量值，当单击一个特定的圆时，在对象中定义一个变量值，并通过

object.property

某种方式调用它。然而，这不起作用

以下是我在工作中使用的一些代码：

    function Graph(i, j, refRel, refRelTxt) {

        subNodes = seventeen + eighteen + nineteen;
        graphNode = "<" + refRelTxt + ">" + subNodes + "<" + refRelTxt + ">";


        var layer = new Kinetic.Layer({
            width: 200,
            height: 100,
            x: (stage.getWidth() / 2.5) + i,
            y: (stage.getHeight() / 2.5) + j

        });


        var circle19 = new Kinetic.Circle({
            x: 10,
            y: layer.getHeight() / 2,
            radius: cradius,
            fill: '#CCCCCC'
        });

        //++++++++++++++++++++++++++++++++++++++++++++++++++     

        var circle18 = new Kinetic.Circle({
            x: 10 + n,
            y: (layer.getHeight() / 2) - m,
            radius: cradius,
            fill: '#CCCCCC'
        });

        var circle17 = new Kinetic.Circle({
            x: 10 + n,
            y: (layer.getHeight() / 2) + m,
            radius: cradius,
            fill: '#CCCCCC'
        });


        //============Mouse in/out operations


        circle17.on('click', function (evt) {
            this.setFill('#00FF00');
            layer.draw();
            seventeen = "<node>seventeen<node>";
        });

        circle18.on('click', function (evt) {
            this.setFill('#00FF00');
            layer.draw();
            eighteen = "<node>eighteen<node>";
        });

        circle19.on('click', function (evt) {
            this.setFill('#00FF00');
            layer.draw();
            nineteen = "<node>nineteen<node>";;
        });


        // add the shape to the layer
        layer.add(circle19);
        layer.add(circle18);
        layer.add(circle17);

        stage.add(layer);
    }

---

然后调用

graph19.graphNode

值，根据用户单击的圆圈获取xml。但是，

graph19.graphNode

不会动态设置值。我知道我在这里做错了一些我无法理解的事情。当我设置全局变量并执行此操作时，它会起作用。我想要的是从创建的各种图形对象中提取XML。

如果我理解正确。。。您希望能够调用

graph19.graphNode

，它将输出一些预定义的xml字符串，这些字符串根据用户单击的圆圈动态填充

如果是：

首先，为了能够从

新图形

对象调用属性

graphNode

，您必须将

分配给这个.graphNode，而不仅仅是
graphNode
。否则，当您调用
graph19.graphNode
时，它将是
未定义的

然后需要将
this
赋值给一个变量，比如：
var node=this
以便您可以在单击功能中访问
节点
。（这是因为默认情况下，当您在动态事件函数中使用
This
时，在这种情况下单击，
This
将被指定给要绑定事件的
dynamic.Shape
）

最后，您需要更新
节点
（this.graphNode），每次单击圆时，使用数组跟踪选定的元素：

    this.graphNode = '';
    var node = this;
    var nodeText = '';

    circle17.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        seventeen = "<node>seventeen<node>";
        nodeText += seventeen;
        node.graphNode = "<" + refRelTxt + ">" + nodeText + "<" + refRelTxt + ">";
    });

    circle18.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        eighteen = "<node>eighteen<node>";
        nodeText += eighteen;
        node.graphNode = "<" + refRelTxt + ">" + nodeText + "<" + refRelTxt + ">";
    });

    circle19.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        nineteen = "<node>nineteen<node>";
        nodeText += nineteen;
        node.graphNode = "<" + refRelTxt + ">" + nodeText + "<" + refRelTxt + ">";
    });

在此之后，您可以执行类似操作，从
dblclick
事件上的
selectedNodes
数组中删除对象。
您好，谢谢您的详细回答。实际上，我想让用户可用，双击以取消选择所选层并删除指定的xml标记。为此，我希望每个圆都与一个对象相关联，以存储自己的xml值，然后在对象中使用所有这些小标记来创建更高级别的xml节点。在这种情况下，如果用户选择了一个圆，xml标记将被分配给对象，如果取消选择，对象将保留一个空白字符串。你认为我能接受你的建议吗？非常感谢。你的建议很有魅力。我的问题更多的是js而不是kineticjs。你是否推荐任何来源来获得关于js的丰富知识？（如您所见，缺少一些基本概念）
    this.graphNode = '';
    var node = this;
    var nodeText = '';

    circle17.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        seventeen = "<node>seventeen<node>";
        nodeText += seventeen;
        node.graphNode = "<" + refRelTxt + ">" + nodeText + "<" + refRelTxt + ">";
    });

    circle18.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        eighteen = "<node>eighteen<node>";
        nodeText += eighteen;
        node.graphNode = "<" + refRelTxt + ">" + nodeText + "<" + refRelTxt + ">";
    });

    circle19.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        nineteen = "<node>nineteen<node>";
        nodeText += nineteen;
        node.graphNode = "<" + refRelTxt + ">" + nodeText + "<" + refRelTxt + ">";
    });

    this.graphNode = '';
    this.selectedNodes = [];
    this.nodeText = '';
    var node = this;

    circle17.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        seventeen = "<node>seventeen<node>";
        selectedNodes.push(seventeen);
        node.nodeText = '';
        for (var i=0; i<selectedNodes.length; i++) {
          node.nodeText += selectedNodes[i];
        }
        node.graphNode = "<" + refRelTxt + ">" + node.nodeText + "<" + refRelTxt + ">";
    });

    circle18.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        eighteen = "<node>eighteen<node>";
        selectedNodes.push(eighteen);
        node.nodeText = '';
        for (var i=0; i<selectedNodes.length; i++) {
          node.nodeText += selectedNodes[i];
        }
        node.graphNode = "<" + refRelTxt + ">" + node.nodeText + "<" + refRelTxt + ">";
    });

    circle19.on('click', function (evt) {
        this.setFill('#00FF00');
        layer.draw();
        nineteen = "<node>nineteen<node>";
        selectedNodes.push(nineteen);
        node.nodeText = '';
        for (var i=0; i<selectedNodes.length; i++) {
          node.nodeText += selectedNodes[i];
        }
        node.graphNode = "<" + refRelTxt + ">" + node.nodeText + "<" + refRelTxt + ">";
    });