使用JQuery切换进度引导栏

Question

我有一个用33％默认值引导的进度条，以及一个使所有活动或不活动状态的开关。 如果开关已激活，我想在进度栏中插入100％的值，如果未激活，则要将0％的值插入。

我得到这个，但是只有一次，如果我两次点击开关，那是行不通的：

JSFiddle： http : //jsfiddle.net/RNMJ7/1/

进度条的主要结构：

<div class="row progbar">
    <div class="col-md-2 col-xs-2"><p class="progressinfo">33%</p></div>
                    <div class="col-md-9">
                        <div class="progress"> 
                            <div class="progress-bar progress-bar-success" style="width: 33%">
                                <span class="sr-only">33% Complete (success)</span>
                            </div>
                        </div>      </div></div>

条形变化的jQuery代码（在开关的on单击事件中）：

$(".switch").click(function () {
    $("#tp1")[0].innerHTML = ( $("#tp1").text() == "Activar todas" )? 'Desactivar todas' : 'Activar todas';
    $(".progressinfo")[0].innerHTML = ( $(".progressinfo").text() == "33%" )? '100%' : '0%';
    var varVisible2 = ( $(".progressinfo").text() == "33%" )? $('.progress-bar-success').css( "width", "33%" ) : $('.progress-bar-success').css( "width", "100%" );
    var varVisible3 = ( $(".progressinfo").text() == "0%" )? $('.progress-bar-success').css( "width", "0%" ) : $('.progress-bar-success').css( "width", "100%" );

$('div.panel').each( function(){
    this.className = "panel " + varVisible;
});

var miniswitch = ( $("#tp1").text() == "Activar todas" )? false : true;

$('.miniswitch').each( function(){
    $("input[type=checkbox]").attr('checked',miniswitch);
});
});

Answer 1

好吧，您应该添加：

|| $（“。progressinfo”）。text（）==“ 0％”

像这样：

$(".progressinfo")[0].innerHTML = ( $(".progressinfo").text() == "33%"
|| $(".progressinfo").text() == "0%" )? '100%' : '0%';

演示在这里： JSFiddle