1

我正在用 raphaeljs 创建一堆图表，我想在页面加载后将它们添加到特定 div 的内容中。

这是我的html：

<div class="chartdiv">
    <span class="A">35</span>
    <div class="charthere"></div>
</div>

<div class="chartdiv">
    <span class="A">25</span>
    <div class="charthere"></div>
</div>

<div class="chartdiv">
    <span class="A">15</span>
    <div class="charthere"></div>
</div>

下面的 jQuery 代码应该遍历所有具有类 chartdiv 的 div，并且对于每个

  • 获取类 A 的跨度中的值，
  • 将其传递给 drawChart 函数
  • 将 svg 与 charthere 类一起放入 div

这是我的js脚本的相关部分：

$(document).ready(function(){

    $('div.chartdiv').each(function(){
        // get the A value
        var A = parseInt($(this).add('span.A').text());

        // substitute the html with the corresponding chart
        drawChart($(this).add('div.charthere'), A);
    });

    function drawChart(element, A) {
        var paper = new Raphael(element, 200, 200);
        var examplePathString = "M20,100 L" + A + ",100";
        var thePath = paper.path(examplePathString);
        thePath.attr({stroke: red,'stroke-width': 5px});
    }
});

相反，所有 svg 元素都是在 div 之后创建的。

4

1 回答 1

1

有两个问题：

1--除了已经在其中的任何内容之外，使用jQuery.add()将任何与选择器匹配的内容添加到选择中。

因此，每个都.add('div.charthere')将 every 添加div.charthere到选择中（不限于的子级div.chartdiv），以及div.chartdiv.

看起来您正在尝试做的是从div.chartdiv下到上的div.charthere那个div。为此，你想要.find('div.charthere')（或者，如果它总是只下降一步，.children('div.charthere')）。

2--您将代表 jQuery 选择的 div 传递给 Raphael 的 jQuery 对象。Raphael 需要一个 DOM 元素（div 本身）或一个 ID 字符串。Raphael 不是 jQuery 插件，因此它不知道如何处理 jQuery 对象。

jQuery 对象就像一个修改后的数组，充当实际 DOM 元素的包装器，因此您可以获取 dom 元素本身$someObj[0]（只要它是您感兴趣的第一个项目）。

所以，.find('div.charthere')[0]应该做的工作。

您需要确保传递给Raphael();的是一个 DOM 元素或字符串。添加console.log(element);到函数的开头并在像 Firebug 这样的调试器中查看控制台，您可能每次都会看到比您想要的更多的元素。

（您通常也不需要输入new-new Raphael()这var paper = Raphael()是官方文档中建议的- 但我认为这不是问题的原因）

于 2013-07-10T16:53:24.160 回答