Question

我正在尝试将jsfiddle用于我的页面，但我无法弄清楚如何将其嵌入到现有代码中。

HTML

<div class="radial-progress" data-progress="0">
<div class="circle">
    <div class="mask full">
        <div class="fill"></div>
    </div>
    <div class="mask half">
        <div class="fill"></div>
        <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
</div>
<div class="inset">
    <div class="percentage">
        <div class="numbers"><span>-</span><span>0</span><span>0,1</span><span>0,2</span><span>0,3</span><span>0,4</span><span>0,5</span><span>0,6</span><span>0,7</span><span>0,8</span><span>0,9</span><span>1</span><span>1,1</span><span>1,2</span><span>1,3</span><span>1,4</span><span>1,5</span><span>1,6</span><span>1,7</span><span>1,8</span><span>1,9</span><span>2</span><span>2,1</span><span>2,2</span><span>2,3</span><span>2,4</span><span>2,5</span><span>2,6</span><span>2,7</span><span>2,8</span><span>2,9</span><span>3</span><span>3,1</span><span>3,2</span><span>3,3</span><span>3,4</span><span>3,5</span><span>3,6</span><span>3,7</span><span>3,8</span><span>3,9</span><span>4</span><span>4,1</span><span>4,2</span><span>4,3</span><span>4,4</span><span>4,5</span><span>4,6</span><span>4,7</span><span>4,8</span><span>4,9</span><span>5</span><span>5,1</span><span>5,2</span><span>5,3</span><span>5,4</span><span>5,5</span><span>5,6</span><span>5,7</span><span>5,8</span><span>5,9</span><span>6</span><span>6,1</span><span>6,2</span><span>6,3</span><span>6,4</span><span>6,5</span><span>6,6</span><span>6,7</span><span>6,8</span><span>6,9</span><span>7</span><span>7,1</span><span>7,2</span><span>7,3</span><span>7,4</span><span>7,5</span><span>7,6</span><span>7,7</span><span>7,8</span><span>7,9</span><span>8</span><span>8,1</span><span>8,2</span><span>8,3</span><span>8,4</span><span>8,5</span><span>8,6</span><span>8,7</span><span>8,8</span><span>8,9</span><span>9</span><span>9,1</span><span>9,2</span><span>9,3</span><span>9,4</span><span>9,5</span><span>9,6</span><span>9,7</span><span>9,8</span><span>9,9</span><span>10</span></div>
    </div>
</div>

JS

$evaluation = 8,5;
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
    $('.radial-progress').attr('data-progress', $evaluation*10);
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);

CSS

.radial-progress {
@circle-size: 120px;
@circle-background: #d6dadc;
@circle-color: #97a71d;
@inset-size: 90px;
@inset-color: #fbfbfb;
@transition-length: 1s;
@shadow: 6px 6px 10px rgba(0,0,0,0.2);
@percentage-color: #97a71d;
@percentage-font-size: 22px;
@percentage-text-width: 57px;

margin: 50px;
width:  @circle-size;
height: @circle-size;

background-color: @circle-background;
border-radius: 50%;
.circle {
    .mask, .fill, .shadow {
        width:    @circle-size;
        height:   @circle-size;
        position: absolute;
        border-radius: 50%;
    }
    .shadow {
        box-shadow: @shadow inset;
    }
    .mask, .fill {
        -webkit-backface-visibility: hidden;
        transition: -webkit-transform @transition-length;
        transition: -ms-transform @transition-length;
        transition: transform @transition-length;
        border-radius: 50%;
    }
    .mask {
        clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
        .fill {
            clip: rect(0px, @circle-size/2, @circle-size, 0px);
            background-color: @circle-color;
        }
    }
}
.inset {
    width:       @inset-size;
    height:      @inset-size;
    position:    absolute;
    margin-left: (@circle-size - @inset-size)/2;
    margin-top:  (@circle-size - @inset-size)/2;

    background-color: @inset-color;
    border-radius: 50%;
    box-shadow: @shadow;
    .percentage {
        height:   @percentage-font-size;
        width:    @percentage-text-width;
        overflow: hidden;

        position: absolute;
        top:      (@inset-size - @percentage-font-size) / 2;
        left:     (@inset-size - @percentage-text-width) / 2;

        line-height: 1;
        .numbers {
            margin-top: -@percentage-font-size;
            transition: width @transition-length;
            span {
                width:          @percentage-text-width;
                display:        inline-block;
                vertical-align: top;
                text-align:     center;
                font-weight:    800;
                font-size:      @percentage-font-size;
                color:          @percentage-color;
            }
        }
    }
}

@i: 0;
@increment: 180deg / 100;
.loop (@i) when (@i <= 100) {
    &[data-progress="@{i}"] {
        .circle {
            .mask.full, .fill {
                -webkit-transform: rotate(@increment * @i);
                -ms-transform: rotate(@increment * @i);
                transform: rotate(@increment * @i);
            }   
            .fill.fix {
                -webkit-transform: rotate(@increment * @i * 2);
                -ms-transform: rotate(@increment * @i * 2);
                transform: rotate(@increment * @i * 2);
            }
        }
        .inset .percentage .numbers {
            width: @i * @percentage-text-width + @percentage-text-width;
        }
    }
    .loop(@i + 1);
}
.loop(@i);
}

问题是我正在尝试将此代码嵌入到返回内容字符串的php函数中。因此，函数中的每个HTML都是 content 字符串中的串联，如下所示：

$content .= ' <div class="etc....." ';

页面显示正确（脚本位置和连接没有问题）但我收到了数字类中 span 内容的回显。输出是这样的：

-00,10,20,30,40,50,60,70,80,911,11,21,31,41,51,61,71,81,922,12,22,32,42,52,62,72,82,933,13,23,33,43,53,63,73,83,944,14,24,34,44,54,64,74,84,955,15,25,35,45,55,65,75,85,966,16,26,36,46,56,66,76,86,977,17,27,37,47,57,67,77,87,988,18,28,38,48,58,68,78,88,999,19,29,39,49,59,69,79,89,910

我认为javascript函数与字符串中包含的HTML不兼容。

嵌入在PHP代码中的Css评级圈

0 个答案: