Question

我有一个bootstrap进度条，可以在更改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%');
  });
});

提前致谢！：）

Answer 1

Here's a working fiddle

你无法添加百分比（我相信），所以我使用.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;
  });
});

Answer 2

另一个答案的例子没问题，但.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 + '%');
    });
});

Answer 3

我注意到你的代码有几件事。

首先，确保您的主播上有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;
}

<强> The jsFiddle

使用Jquery更改单击的宽度

3 个答案: