3

width属性が変更されたときに現在の進行状況を変更するブートストラッププログレスバーがあります。この幅属性を変更して、ユーザーがオンに切り替えたときに10％を追加し、ユーザーがオフに切り替えたときに10％を減らしたいと思います。

これが私のコードです：

<div class="progress progress-danger progress-striped active"> 
       <div class="bar" style="width:30%"></div>
</div>

<a id="updateit">Click to change the progress</a>



$(function(){
  $("#updateit").toggle(function(){
     $('.bar').css("width", + '10%');
  });
});


前もって感謝します！:)

4

3 に答える 3

2

これが実用的なフィドルです

パーセンテージを追加することはできないので（私は信じています）、の幅を使用して変換しました.progress。

0.1 = 10％

$(function(){
  $("#updateit").toggle(
   function(){
     $('.bar').css("width", '+=' + (0.1 * $('.progress').width()));
     return false;
  },
  function(){
     $('.bar').css("width", '-=' + (0.1 * $('.progress').width()));
     return false;
  });
});
于 2012-10-18T00:24:05.287 に答える
1

他の答えの例は大丈夫ですが、.barは最終的にピクセル単位の固定値になります。それでも値を％で設定したい場合は、これを試すことができます（親が幅を変更した場合、.barも％値で変更されます）。

$(function(){
    var $bar = $(".bar");
    $("#updateit").toggle(function(){
        $bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) +10 + '%');
    },
    function(){
        $bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) -10 + '%');
    });
});
于 2012-10-18T00:55:01.933 に答える
0

私はあなたのコードにいくつかのことに気づきました。

まず、hrefアンカーにが付いていることを確認します。使用されていない場合でも適切なHTMLです（return false;リンクをたどらないようにJavaScriptに追加してください）。hrefがないため、ブラウザはリンクをまったく認識しませんでした。

次に、ユーザーにリンクをクリックしてもらい、幅を切り替えます。click()その場合、イベントが必要になります。

その後、これが私が思いついたものです：

jQuery

var isOn = true;
$(function(){
   $("#updateit").click(function(){
      console.log(isOn);
      if ( isOn ){
          isOn = false;
          $('.bar').css("width", '10%');
      } else {
          isOn = true;
          $('.bar').css("width", '20%');
      }
      return false;
  });
});​

HTML

<div class="progress progress-danger progress-striped active"> 
       <div class="bar"></div>
</div>

<a href="#" id="updateit">Click to change the progress</a>
​

CSS（.barテスト用に表示し、初期幅を設定するために使用されます）

.bar{
    width:20%;
    height:20px;
    background:#600;
}​

jsFiddle

于 2012-10-18T00:37:01.637 に答える