Question

我遇到jQuery .data()和Raphael's SVG path()的问题。

我写了little example来解释。

paper = Raphael(0, 0, 600, 600)
polygon = paper.path('M19,20L24,83L106,62L112,23Z')
polygon.data('test', 'I need this info later!')
polygon.attr({"fill":"orange"})

$(document).on('click', onClick)

function onClick() {
    console.log('click')
    if(event.target.nodeName === 'path') {
        // how do i get data('test') ?

        // console.log(this.data('test')) // Uncaught TypeError: Object #<HTMLDocument> has no method 'data' 
        console.log($(this).data('test')) // undefined
        // console.log(event.target.data('test')) // Uncaught TypeError: Object #<SVGPathElement> has no method 'data' 
        console.log($(event.target).data('test')) // undefined

        // But jquery.remove() does work?
        $(event.target).remove()

    }
}

如您所见，我创建了一个多边形，用颜色填充它，并为文档添加了一个事件监听器。每次点击我都会检查目标。如果这是一个多边形，我想得到它的数据。

请注意，在我的实际代码中，我生成了大量像这样的多边形。所以一个简单的polygon.data()无济于事。我唯一的解决方案是使用event.target作为参考。 Example of multiple polygons

我如何收到数据值？

Answer 1

你很接近，你只需要包装在jquery对象中的节点来首先设置数据：

$(polygon.node).data('test', 'I need this info later!');

我更新了您的jsfiddle以显示其正常运作。

为什么jQuery.data（）会错误地使用Raphael svg路径？

1 个答案: