使用jQuery将x％宽度添加到div

Question

我有一种“加载条”，最初宽度为0％。

<div id="loading_bar"></div>

现在我还有一个表单......有不同类型的字段......

例如我有5个选择框...现在，如果我从选择框nr1中选择一些东西...必须从0％变为20％...现在如果我从选择框nr2中选择一些东西，则另外添加20％ div宽......等等......

我写了这段代码，但它给了我像素而不是百分比...

$("#loading_bar").css("width", "+=20");

我怎么写这样ADDS 20％而不是20px ..？有人可以帮忙......谢谢

---

EDIT / UPDATE

我有5个选择框......

对于每个选择框，我有一个IF ELSE语句..

例如：如果选择了IF selectboxnr1，则向div添加20％...如果它已被DESELECTED（未选中）...减去20％返回

每隔5个选择框

等等。

P.S。我手动编写每个选择框的％...所以我写了

$("#loading_bar").css("width", 20+"%")

Answer 1

您需要两个步骤：

var new_width = $("#loading_bar").css("width") * 1,2
$("#loading_bar").css("width",new_width+"px")

如果您在css中使用px，请将%替换为{{1}}。

Answer 2

当我假设你在某个地方有实际正确的百分比时，你为什么要做+ =？

$("#loading_bar").css("width", percentage+"%")

Answer 3

尝试这个

更新，您可以使变量增加并执行此操作

    $("#loading_bar").css({width, With+"%"})

或者

    $("#loading_bar").css("width",With+"%")

Answer 4

你可以更清洁并为它写一个CSS语句

.width-20percent {
    width: 20%;
}

然后添加该类：

$("#loading_bar").addClass('width-20percent ');

这也可以让你轻松地在其他元素上重复使用它，这样你只需要改变主意就可以编辑一次。

希望这有帮助:)