如何使用 jQuery 在数据属性中放置 DOM 对象？

Question

细分：

所以基本上，我使用的是 Twiiter Bootstrap 弹出窗口。

popover 的工作方式是 DOM 元素（或内容）必须位于名为 data-content 的数据属性中，以便弹出框在调用时可以在其内容中显示它。

我正在使用一个小的 jQuery 插件来生成一个迷你图表 (Peity)。我试图将此图表保存为变量，然后将变量粘贴到popover 所在元素的data-content 属性中。 DOM 对象必须放在data-content 内，以便popover 确定放置位置。如果图表直接放入popover-content 类中，弹出框将不知道将自己放置在哪里（因为它的位置是绝对的），并且它的top 值将不正确。

我的尝试：

我尝试为特定类启动弹出框（应用于许多td 元素）。一旦为所有这些创建了弹出框，我就创建了悬停事件。

function createLargeGraphs() {
    //Initiating the popover for every td
    $('td.chartSection').each(function () {
        $(this).popover({
            placement: 'top',
            trigger: 'hover',
            html: true,
            container: $(this),
            delay: {
                hide: 500
            },
        });
    });

    //When hovered, create the full graph with data
    $('td.chartSection').on('mouseenter', function () {
        displayLargeGraph($(this));
    });
}

然后我将悬停的元素传递给另一个要处理的函数。这是创建数据的地方（Peity 需要一个带有逗号分隔数字的span 数据。此数据当前是虚拟数据。）在一个跨度内，在popover 内容内。数据可访问后，Peity 插件会将这些数据转换为图表，该图表另存为变量并移动到data-content 属性中。

function displayLargeGraph($elem) {
    var $popoverContent = $elem.find('.popover-content');

    //Create the span with the data values comma separated. This is a requirement for the Peity plguin.
    var theSpan = '<span class="largeChart' + chartCounter + '">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>';

    $popoverContent.append(theSpan);

    //Creating the chart and saving as a variable
    var $chart = $(".largeChart" + chartCounter).peity("line", {
        height: 159,
        width: 600,
    });

    $elem.attr('data-content', $chart);

    //Adding one to the chartCounter variable for next use
    chartCounter++;
}

出了什么问题：

图表未成功放置在data-content 属性中。相反，在源代码中，它是[object Object]。

我怎样才能把它放到data-content 中作为它的完整 DOM 源，例如：

<svg class="peity" height="159" width="600"><polygon fill="#c6d9fd" points="0 158 0 70.72222222222221 31.57894736842105 105.83333333333333 63.1578947368421 0.5 94.73684210526315 53.16666666666666 126.3157894736842 70.72222222222221 157.89473684210526 0.5 189.4736842105263 35.6111111111111 221.05263157894737 105.83333333333333 252.6315789473684 70.72222222222221 284.2105263157895 123.38888888888889 315.7894736842105 70.72222222222221 347.36842105263156 105.83333333333333 378.9473684210526 0.5 410.52631578947364 53.16666666666666 442.10526315789474 70.72222222222221 473.6842105263158 0.5 505.2631578947368 35.6111111111111 536.8421052631579 105.83333333333333 568.421052631579 70.72222222222221 600 123.38888888888889 600 158"></polygon > < polyline fill = "transparent" points = "0 70.72222222222221 31.57894736842105 105.83333333333333 63.1578947368421 0.5 94.73684210526315 53.16666666666666 126.3157894736842 70.72222222222221 157.89473684210526 0.5 189.4736842105263 35.6111111111111 221.05263157894737 105.83333333333333 252.6315789473684 70.72222222222221 284.2105263157895 123.38888888888889 315.7894736842105 70.72222222222221 347.36842105263156 105.83333333333333 378.9473684210526 0.5 410.52631578947364 53.16666666666666 442.10526315789474 70.72222222222221 473.6842105263158 0.5 505.2631578947368 35.6111111111111 536.8421052631579 105.83333333333333 568.421052631579 70.72222222222221 600 123.38888888888889" stroke = "#4d89f9" stroke - width = "1" stroke - linecap = "square" > < /polyline></svg >

---

注意：在实时版本中，将有数百个（如果不是数千个）这些表格元素。这就是为什么我只在请求/悬停时尝试创建数据和弹出框。

我的计数器 (chartCounter) 目前变得非常大，因为每次悬停元素时都会运行函数 displayLargeGraph，即使图表已经存在也是如此。忽略这一点，因为我只在不存在该元素的图表时才运行该函数。

DEMO HERE

Answer 1

.popover() 方法采用一个选项对象，在该选项对象中，您可以将内容指定为在需要内容时调用的函数。然后，您可以在调用该函数时根据需要动态生成内容。

由于您可能不想为其预生成所有 HTML 的自定义内容，这可能是您想要的方式。

function createLargeGraphs() {
    //Initiating the popover for every td
    $('td.chartSection').each(function () {
        $(this).popover({
            placement: 'top',
            trigger: 'hover',
            html: true,
            container: $(this),
            delay: {
                hide: 500
            },
            content: function() {
                // create your content here
            }
        });
    });

    //When hovered, create the full graph with data
    $('td.chartSection').on('mouseenter', function () {
        displayLargeGraph($(this));
    });
}

Answer 2

好吧，$chart 将引用 .largeChart 元素。你要的是peity生成的元素。无需深入研究该插件的文档（看看是否有更好的解决方案），通过检查您可以简单地替换：

$elem.attr('data-content', $chart);

与

if ($chart.siblings('.peity').length) {
    $elem.attr('data-content', $chart.siblings('.peity')[0].outerHTML);
}

Answer 3

我不使用data-* 属性，而是使用key => value 数组，其中：

密钥：".largeChart" + chartCounter

值：$chart

Answer 4

一种可能的方法是使用jQuery's .data：

$elem.data('content', $chart);

代替：

$elem.attr('data-content', $chart);