Question

我寻求一种最终看起来很简单的方法......但我还没有管理好！

我在圈内css中的数字（跨度）的想法。我希望我圈子的边缘根据它所包含的数字而改变。

例如：如果数字介于0到10之间，则border = 2px 如果数字在10到20之间，则边界= 4px 等......

我希望你的帮助，谢谢！

PS：当跨度超出我的cercle PLZ时，同样的想法：）

Answer 1

这里有一个可以帮到你的例子：

$(".s").each(function() {
   var text = parseInt($(this).text());
    if ( text > 0 && text <= 10 ) {
        $(this).addClass("border-2");
    } else if ( text > 10 && text <= 20 ) {
        $(this).addClass("border-4");
    }
});

<强> HTML

<span class="s">9</span>
<span class="s">5</span>
<span class="s">15</span>

<强> CSS

.s {
    display: block;
    background: red;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}
.border-2 {
    border-radius: 2px;
}
.border-4 {
    border-radius: 4px;
}

演示：http://jsfiddle.net/hrbnrkqa/

Answer 2

您是否可以在您的网页上实施JavaScript？如果是这样，你可能最好检查跨度的值并相应地调整css。

即。 var valueOfSpan = $（'＃idOfSpan'）。val（） if（valueOfSpan＆gt; 0＆amp;＆amp; valueOfSpan＆lt; = 10） $（'＃idOfSpan'）。css（“border-radius”，“2px”）;

Answer 3

您只想要那些具体步骤，还是一般行为的例子？对于后者，这个小提琴适合我： https://jsfiddle.net/svArtist/xn7s3700/

＆＃13;

$(".borderbycontent").each(function(){
   $(this).css("border-radius", $(this).html()/5); 
});

＆＃13;

.borderbycontent{
    width:30px;
    height:30px;
    background-color:#ddd;
    color:#000;
    border:1px solid #aaa;
    font-weight:bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="borderbycontent">
    5
</div><div class="borderbycontent">
    10
</div><div class="borderbycontent">
    20
</div><div class="borderbycontent">
    30
</div><div class="borderbycontent">
    60
</div>

＆＃13;

否则，只需取值并检查带开关/外壳的范围，例如。

Answer 4

选择所有元素，循环收集并计算新的边界半径值：

/**
 * Algorithm to calculate new radius
 * Number ranges progression: 0:10 - 2, 10:20 - 4, 20:30 - 6, 30:40 - 8, etc.
 * Get top boundary of the range and devide by 5.
 */
[].slice.call(document.querySelectorAll('.smart-border')).forEach(function(span) {
    var number = Number(span.textContent.trim());
    var newBorder = Math.ceil(number / 10) * 10 / 5;
    span.style.borderRadius = newBorder + 'px';
});

.smart-border {
    border: 2px #1D9B28 solid;
    height: 50px;
    width: 50px;
    display: inline-block;
    background: #CFBB92;
    line-height: 3;
    text-align: center;
}

<span class="smart-border">5</span>
<span class="smart-border">15</span>
<span class="smart-border">21</span>
<span class="smart-border">36</span>

CSS圈边界根据其包含的数量增加/减少

4 个答案: