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

Question

分割:

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

popover 的工作方式是 DOM 元素(或内容)必须在名为 data-content 的数据属性中，这样 popover 才能在其内容中显示它调用时。

我正在使用一个小型 jQuery 插件来生成一个迷你图表 (Peity)。我试图将此图表保存为变量，然后将该变量粘贴到 popover 所在元素的 data-content 属性中。 DOM 对象必须放置在 data-content 内，以便 popover 确定放置位置。如果图表直接放在 popover-content 类中，popover 将不知道将自己放在哪里(因为它有一个绝对位置)，并且它的 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]。

我如何将它作为完整的 DOM 源放入 data-content 中，例如:

<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));
    });
}