Question

我有一个带有引导程序的进度条，它具有33％的默认值，以及一个使所有活动或非活动状态的开关。如果开关如果激活我想在进度条中插入一个100％的值，如果是非活动值则为0％。

我得到这个，但只有一次，如果我点击两次开关这不起作用：

进度条的主要结构：

<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代码更改（在交换机的点击事件中）：

$(".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

使用JQuery切换进度引导栏

1 个答案: