jquery - 带有负值的进度条.css(width, )

Question

我搜索和研究了所有互联网的论坛......但我没有找到解决方案......

我需要这个:

<label> Name:
        <input type="text" id="name" name="name" required />
</label> 
<div class="container">
        <div class="progress progress-danger progress-striped active">
            <div class="bar" id="progBar" ></div> 
        </div>
    </div>  

所以，我希望当用户退出字段(onBlur)时，他接收字符数量并作为进度条的值返回，如果该参数为负数，则作为进度条的值返回，只能是负数，不然又是杠了。

bar和JS的代码...

$(document).ready(function() {

$("*").blur(function() {
    var $bar = $("#progBar");
    var $name = $("name");

    if ($("#name").val().length > 2) {
        $bar.css('width', "30%");
    } else {
        $bar.css('width', "-30%"); //How, I do this????????
    }   

Answer 1

负宽度是什么意思？在CSS中，负宽度是不允许的。

在这里阅读或谷歌搜索。

http://www.css3.com/css-width/

CSS WIDTH

This property specifies the width of an element’s rendering box for block-level and replaced elements. Negative values are not allowed.

正宽度是一个属性，如果您正在寻找元素左侧的宽度，它不是负宽度，而是静态宽度，您可能有不同的元素来显示该宽度。

这就是您要寻找的内容。

<强> JSFIDDLE

这适用于 2 个输入字段，

if (($("#name").val().length > 2) && ($("#email").val().length>2)) {
    $('#positive').css('width','100%');
} else if($("#name").val().length > 2 || $("#email").val().length>2){
    $('#positive').css('width','50%');
} else{
    $('#positive').css('width','0%');
}

您可能还想查看 jquery ui 的 progressbar ,

一个 jsFiddle 显示它就在这里。

<强> fiddle