【问题标题】:css style like pie chart is not working with jquery append像饼图这样的css样式不适用于jquery append
【发布时间】:2017-09-22 00:17:02
【问题描述】:

当我用 javascript 附加相同的 html 代码时,形成上述两个图像 css 不起作用。

这是我的html代码:

<tbody id="strengthsTableBody">
<tr>td class='text-center'>
<div class="text-center">
    <div class="inline">
        <div class="easypiechart" 
        data-percent="90" 
        data-line-width="15"
        data-track-color="#eee" 
        data-bar-color="#5cb85c"
        data-scale-color="#fff" 
        data-size="100" 
        data-line-cap='butt'>
            <span class="h3 step">90</span>%
        </div>
    </div>                      
 </div>
</td></tr>

我用 jquery 附加相同的代码并将其作为字符串但它不起作用:这是我的附加脚本:

courceResultsData = 
"<tr><td class='text-center'>
    <div class='text-center'>
        <div class='inline'>
            <div class='easypiechart'
            data-percent='90'
            data-line-width='15'
            data-track-color='#eee'
            data-bar-color='#5cb85c'
            data-scale-color='#fff'
            data-size='100'
            data-line-cap='butt'>
                <span class='h3 step'>90</span>% 
            </div> 
        </div> 
    </div>
</td>
</tr>";

$("#strengthsTableBody" ).append( courceResultsData );

【问题讨论】:

  • 除了 html/jquery 之外,您还需要 CSS。你的 CSS 在哪里。创建一个小提琴示例,不要忘记在其中添加 CSS。
  • html 字符串与工作示例不同,因为有额外的&lt;td&gt;
  • 对不起,这是一个错字,我检查了它,但仍然无法正常工作@RobinMackenzie
  • @AlivetoDie 我是 CSS 新手,我完全参与了开发,你能帮忙在追加时如何调用 CSS 属性吗?

标签: javascript jquery html css styles


【解决方案1】:

您不能将数据属性分成不同的行。 要么组成一行,要么将每一行添加到变量中。

https://jsfiddle.net/shiladitya/wu4xgdfh/

var courceResultsData = "<tr><td class='text-center'> <div class='text-center'><div class='inline'><div class='easypiechart' data-percent='90' data-line-width='15' data-track-color='#eee' data-bar-color='#5cb85c' data-scale-color='#fff' data-size='100' data-line-cap='butt'> <span class='h3 step'>90</span>% </div> </div> </div></td></tr>";

$("#strengthsTableBody").append(courceResultsData);

【讨论】:

    猜你喜欢
    • 2020-08-23
    • 1970-01-01
    • 1970-01-01
    • 2015-04-25
    • 2017-11-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多