Question

我正在使用Node.js 6.10.0和Mongoose 4.8。在我的HTML表单中，我输入了4个SVG并使用raphael.js构建，为每个创建的路径添加事件。

当我点击一个SVG路径时，我用一种颜色填充路径，并且我想在这条路径着色时设置属性为true，但我不知道如何。我想使用html5 data- *属性，但我不知道如何通过html表单发送data- *属性。

这是我的javascript代码，用于将事件添加到第一个svg：

var first = Raphael('first');
plantar.setViewBox(0, 0, 750, 700, true);
plantar.setSize('100%', '100%');

var style = {
    fill: "#ddd",
    stroke: "#aaa",
    "stroke-width": 1,
    "stroke-linejoin": "round",
    cursor: "pointer"
};

var animationSpeed = 500;
var hoverStyle = {
    fill: "#A8BED5"
};

var regions = {};
regions['r1']  = first.path("m 14.233488,305.60141 6.69812,43.53774 8.37264,32.6533 42.70047,-10.04717 -8.37264,-97.12264 -17.58255,10.88443 -17.58255,9.20991 z");

...

regions['l20'] = first.path("m 674.8942,501.09873 -7.10442,43.8106 -6.51239,25.45751 -4.14425,13.61681 -8.28849,14.20884 4.73628,-102.42208 z");

for(var regionName in regions) {
    (function (region) {
        region.attr(style);
        region.node.name = regionName;

        region[0].addEventListener("click", function() {
            region.attr("fill", "#A8BED5");
        }, true);

    })(regions[regionName]);
}

我知道使用ajax很容易我可以使用$('#element").data('attribute')发送自定义参数但是在表单提交中我不知道该怎么做。

目的是填补我的mongodb模型。在我的模型中，我有一个名为parts的属性，它看起来像这样：

var meetingSchema = new Schema({
    client_id       :{ type: Schema.Types.ObjectId, ref: 'Client' },
    number          : Number,
    date            : Date,
    observations    : String,
    parts : {
        first : {
            r1  : { type: Boolean, default: false },
            r2  : { type: Boolean, default: false },
            r3  : { type: Boolean, default: false },
            r4  : { type: Boolean, default: false },
            r5  : { type: Boolean, default: false },
            r6  : { type: Boolean, default: false },
            r7  : { type: Boolean, default: false },
            r8  : { type: Boolean, default: false },
            r9  : { type: Boolean, default: false },
            r10 : { type: Boolean, default: false },
            r11 : { type: Boolean, default: false },
            r12 : { type: Boolean, default: false },
            r13 : { type: Boolean, default: false },
            r14 : { type: Boolean, default: false },
            r15 : { type: Boolean, default: false },
            r16 : { type: Boolean, default: false },
            r17 : { type: Boolean, default: false },
            r18 : { type: Boolean, default: false },
            r19 : { type: Boolean, default: false },
            r20 : { type: Boolean, default: false },
            l1  : { type: Boolean, default: false },
            l2  : { type: Boolean, default: false },
            l3  : { type: Boolean, default: false },
            l4  : { type: Boolean, default: false },
            l5  : { type: Boolean, default: false },
            l6  : { type: Boolean, default: false },
            l7  : { type: Boolean, default: false },
            l8  : { type: Boolean, default: false },
            l9  : { type: Boolean, default: false },
            l10 : { type: Boolean, default: false },
            l11 : { type: Boolean, default: false },
            l12 : { type: Boolean, default: false },
            l13 : { type: Boolean, default: false },
            l14 : { type: Boolean, default: false },
            l15 : { type: Boolean, default: false },
            l16 : { type: Boolean, default: false },
            l17 : { type: Boolean, default: false },
            l18 : { type: Boolean, default: false },
            l19 : { type: Boolean, default: false },
            l20 : { type: Boolean, default: false }
        },
        second : {
            r1 : { type: Boolean, default: false },
            r2 : { type: Boolean, default: false },
            r3 : { type: Boolean, default: false },
            l1 : { type: Boolean, default: false },
            l2 : { type: Boolean, default: false },
            l3 : { type: Boolean, default: false }
        },
        third : {
            r1 : { type: Boolean, default: false },
            r2 : { type: Boolean, default: false },
            l1 : { type: Boolean, default: false },
            l2 : { type: Boolean, default: false }
        },
        fourth : {
            l1 : { type: Boolean, default: false },
            l2 : { type: Boolean, default: false },
            l3 : { type: Boolean, default: false },
            r1 : { type: Boolean, default: false },
            r2 : { type: Boolean, default: false },
            r3 : { type: Boolean, default: false }
        }
    }
});

因此，例如，当r1 SVG路径着色时，我想将属性meeting.parts.first.r1设置为true。

你能帮我找一个聪明的方法来填充我的模特吗？

通过html5格式

0 个答案: